ontimize-web-ng2-map
v2.0.0-rc.2
Published
An implementation of leaflet map for Ontimize Web
Downloads
11
Readme
Ontimize Web Map
An implementation of leaflet map library for Ontimize Web.
Examples
Check out examples demo here
Installation
First you need to install map module dependencies (leaflet and plugin libraries):
npm install [email protected] [email protected] [email protected] [email protected] [email protected] --save
Do not forget to add typings as well
typings install leaflet --ambient -DA
Ensure that you have installed 'typings' node module globally with the same version of the one saved into the package.json of the application. For checking the version : typings -v For installing globally: npm install -g [email protected]
After that, install the npm map module:
npm install ontimize-web-ng2-map --save
Usage
Finally, you can use ontimize-web-ng2-map in your Ontimize Web project.
Configure third party dependencies and map module (Angular-cli & SystemeJS)
Configure third party dependencies like this:
system-config.ts
const cliSystemConfigPackages: any = {
};
// ontimize map module
cliSystemConfigPackages['ontimize-web-ng2-map'] = { main: 'o-map' };
// third party dependencies
cliSystemConfigPackages['leaflet'] = { main: 'dist/leaflet' };
cliSystemConfigPackages['leaflet-providers'] = { main: 'leaflet-providers', defaultExtension: 'js' };
cliSystemConfigPackages['leaflet-draw'] = { main: 'dist/leaflet.draw' };
cliSystemConfigPackages['ng2-dragula'] = { main: 'ng2-dragula', defaultExtension: 'js' };
cliSystemConfigPackages['dragula'] = { main: 'dragula', defaultExtension: 'js' };
cliSystemConfigPackages['contra'] = { main: 'contra', defaultExtension: 'js' };
cliSystemConfigPackages['atoa'] = { main: 'atoa', defaultExtension: 'js' };
cliSystemConfigPackages['ticky'] = { main: 'ticky', defaultExtension: 'js' };
cliSystemConfigPackages['crossvent'] = { main: 'crossvent', defaultExtension: 'js' };
cliSystemConfigPackages['custom-event'] = { main: 'index', defaultExtension: 'js' };
// Apply the CLI SystemJS configuration.
System.config({
map: {
...
'ontimize-web-ng2-map': 'vendor/ontimize-web-ng2-map',
'leaflet': 'vendor/leaflet',
'leaflet-providers': 'vendor/leaflet-providers',
'leaflet-draw': 'vendor/leaflet-draw',
'ng2-dragula': 'vendor/ng2-dragula',
'dragula': 'vendor/dragula',
'contra': 'vendor/contra',
'atoa': 'vendor/atoa',
'ticky': 'vendor/ticky',
'crossvent': 'vendor/crossvent/src',
'custom-event': 'vendor/custom-event'
},
packages: cliSystemConfigPackages
});
angular-cli-build.js
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
....
'ontimize-web-ng2-map/*.js',
'ontimize-web-ng2-map/src/**/*.js',
'leaflet/**/*.js',
'leaflet-providers/**/*.js',
'leaflet-draw/**/*.js',
'ng2-dragula/**/*.js',
'dragula/*.js',
'contra/*.js',
'atoa/*.js',
'ticky/*.js',
'crossvent/src/*.js',
'custom-event/*.js',
'ontimize-web-ng2-map/**/*.css',
'leaflet/**/*.css',
'leaflet/dist/images/*.*',
'leaflet-draw/**/*.css'
]
});
};
index.html Do not forget to include CSS style sheets
<link rel="stylesheet" type="text/css" href="./vendor/leaflet/dist/leaflet.css">
<link rel="stylesheet" type="text/css" href="./vendor/leaflet-draw/dist/leaflet.draw.css">
<link rel="stylesheet" type="text/css" href="./vendor/ontimize-web-ng2-map/o-map.css">
app.module.ts Include the library map module into your app.
...
import { OMapModule } from 'ontimize-web-ng2-map/o-map';
...
@NgModule({
imports: [ ONTIMIZE_MODULES, routing, OMapModule],
declarations: [
AppComponent,
ONTIMIZE_DIRECTIVES,
...APP_DIRECTIVES
],
bootstrap: [ AppComponent ],
providers: [
...standardProviders,
...customProviders
]
})
export class AppModule { }