Cot Map
baba baloul (Unlicensed)
Introduction
Embed a map and easily add markers or ESRI featureLayers.
Added since version 7.2.0
Functionalities:
- Uses the awesome LeafletJS Javascript library
- Embed a map based on ESRI basemap
- Includes a method to add markers (with clustering provided by Leaflet.markercluster plugin)
- Includes a method to add featureLayers provided by GCC (see the ESRI-leaflet plugin)
- Includes a method to display the map in fullscreen mode (see the Leaflet.fullscreen)
- NEW - display vector basemap using Esri Leaflet Vector
How to embed the basemap
Turn on the option in package.json
In your app folder, make sure you turn on the option to include all the CSS and JS necessary.
In package.json file: includeMap:true,
Run the command npm update if needed.
Add the code
Initialize the map and pass the options you need
var yourMap = new cot_map('yourMapDiv',options);
yourMap.render();
Options reference
| Property | Description | Example |
|---|---|---|
mapCenter | Array Latitude and Longitude of the center of the map | mapCenter: [43.66, -79.373903], |
zoom | Number Default zoom level | zoom: 16, |
mapType | String Set the default basemap. | mapType: 'Streets', |
isVectorBasemap | Boolean If true, basemap will be a vector basemap instead of Raster basemap. WARNING : CORS plugin activated = no vector basemap !!! | isVectorBasemap: true, |
mapHeight | Number or String Height of the map. If String, you can set unit such as | mapHeight: 500, |
maxBounds | Array Latitude and Longitude of the NE and SW corner of the map | maxBounds: [ [43.390, -80.290], [44, -78.600] ], |
enableControlBox | Object Set the control box position and width for featureLayers added to the map. | enableControlBox:{
position:'bottomright',
width:400
}
|
enableFullscreen | Boolean or Object Add a fullscreen button to the zoom-in/zoom-out button. Can also be an object with properties options (see plugin's options on GitHub), enterFullscreen and exitFullscreen (functions). | enableFullscreen:{
options:{
forceSeparateButton: true
},
enterFullscreen:function(){
// this is fired before entering fullscreen mode
},
exitFullscreen:function(){
// this is fired before exiting fullscreen mode
}
}
|
enableSearchBar | Boolean or Object Add a search bar. Can also be an object with properties position, width, maxSuggest. | enableSearchBar:{
position:'topright',
width:300,
maxSuggest:10
}
|
How to display a ESRI featureLayer
Add the code
Initialize the map (see above), then add the following code
yourMap.addFeatureLayer(options);
Options reference
| Property | Description | Example |
|---|---|---|
id | String Id of the featureLayer. | id: 'myFeatureLayerID', |
url | String URL of the featureLayer server | url:'https://serv.arcgis.com/ (... ) /FeatureServer/0 |
title | String Title of the featureLayer. Will be displayed when the featureLayer is added to the control box | title: 'My featureLayer', |
enableClustering | Boolean | mapType: 'Streets', |
addToControlBox | Boolean | isVectorBasemap: true, |
| loadByDefault | Boolean - default true If set to false, doesn't load the featureLayer to the map. Can be useful to create the featureLayers without displaying it. In that situation, featureLayer will have to be added to the map such as : yourMap.featureLayerList[myFeatureLayerID].fl.addTo(yourMap.map) | loadByDefault: true, |
| template | String Template loaded with L.Util.template() to display the popup with bindPopup() | template:'<div>{PROPERTY}</div>' |
Page Tree