This project is still being developed. For more information please check this site
This project was generated with Angular CLI version 1.6.5.
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>
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.
# | 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) |
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
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.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.