NgxPinOverImage

This project is still being developed. For more information please check this site

This project was generated with Angular CLI version 1.6.5.

Usage

app.module.ts file should look likes to:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { PinOverImageModule } from './modules/pin-over-image/pin-over-image.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PinOverImageModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In your component file:

import { PinOverImageComponent } from './modules/pin-over-image/pin-over-image.component'
import { OptionModel } from './modules/pin-over-image/models/option.model';
import { PinModel } from './modules/pin-over-image/models/pin.model';
import { PointModel } from './modules/pin-over-image/models/point.model';

@Component({...})
export class AppComponent {
  title = 'app';
  options:OptionModel = new OptionModel;
  pinList:PinModel[] = [];
  constructor(){

  }
  ngOnInit(){
      this.options.setBaseObject({
        imageUrl:"https://busraabaci.files.wordpress.com/2015/04/doga-2.jpg",
        outerDivWidth:600,
        outerDivHeight:500,
        addPinIconUrl:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Toicon-icon-stone-pin.svg/2000px-Toicon-icon-stone-pin.svg.png",
        hideShowIconUrl:"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/OOjs_UI_icon_eye.svg/2000px-OOjs_UI_icon_eye.svg.png",
        zoomInIconUrl:"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Zoom_in_font_awesome.svg/2000px-Zoom_in_font_awesome.svg.png",
        zoomOutIconUrl:"https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Zoom_out_font_awesome.svg/2000px-Zoom_out_font_awesome.svg.png",
        progressImgSrc:"https://upload.wikimedia.org/wikipedia/commons/a/ad/YouTube_loading_symbol_3_%28transparent%29.gif",
        pinBackground:"url(https://cdn4.iconfinder.com/data/icons/iconsimple-places/512/pin_1-128.png)",
        pinWidth:20,
        pinHeight:20,
        pinRadius:10,
        pinBorderRadius:10,
        addPinText:"Add Pin",
        hideShowText:"Hide/Show",
        zoomInText:"Zoom In",
        zoomOutText:"Zoom Out",
        textColor:"#fff",
        bottomDivBackground:"linear-gradient(#000000b0, red)"
    });

    let pin1 = new PinModel();
    pin1.id = 1;
    pin1.visibility = "visible";
    let p1:PointModel = new PointModel();
    p1.left = 250;
    p1.top = 250;
    pin1.point = p1;
    this.pinList.push(pin1);

  }

In your HTML file:

<pin-over-image [optionData]="options" [pinListData]="pinList" ></pin-over-image>

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

OptionModel Properties

#	Property	Type	Description
1	imageUrl	string	url of the background image
2	outerDivWidth	number	width of the window of the image in pixels.
3	outerDivHeight	number	height of the window of the image in pixels.
4	addPinIconUrl	string	icon url for adding pin.
5	hideShowIconUrl	string	icon url for hiding and showing pins.
6	zoomInIconUrl	string	icon url for zooming in.
7	zoomOutIconUrl	string	icon url for zooming out.
8	progressImgSrc	string	url of progress loading icon.
9	pinBackground	string	url (url('https//:...')) or color (#fff) of pin icon.
10	pinWidth	number	width of pin icon in pixels.
11	pinHeight	number	height of pin icon in pixels.
12	pinRadius	number	radius of pin icon.
13	pinBorderRadius	number	border radius of pin icon in pixels.
14	addPinText	string	text for adding pin icon.
15	hideShowText	string	text for hiding and showing pins icon.
16	zoomInText	string	text for zooming in icon.
17	zoomOutText	string	text for zooming out icon.
18	textColor	string	text color of adding pin, hide and show pins, zoom in and zoom out icons.
19	bottomDivBackground	string	background url (url('https://...')) or color div of the icons(add pin, hide/show pins, zoom in, zoom out)

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

MrYavuz / ngx-pin-over-image