|
| 1 | +function addIml(map) { |
| 2 | + // HERE platform stores data in catalogs. Define Here Resource Name (HRN) of the catalog |
| 3 | + const catalogHrn = 'hrn:here:data::olp-here:dh-showcase-dc-transit'; |
| 4 | + // A catalog is a collection of layers that are managed as a single set. Define the layer that stores data |
| 5 | + const layerId = 'dc-transit'; |
| 6 | + // Instantiate the IML service |
| 7 | + const service = platform.getIMLService(); |
| 8 | + // Create a provider for the custom user defined data |
| 9 | + const imlProvider = new H.service.iml.Provider(service, catalogHrn, layerId); |
| 10 | + |
| 11 | + // Get the style object |
| 12 | + const style = imlProvider.getStyle(); |
| 13 | + // Query the sub-section of the style configuration |
| 14 | + const styleConfig = style.extractConfig(['iml']); |
| 15 | + |
| 16 | + // Add dashes |
| 17 | + styleConfig.layers.iml.lines.draw.lines.dash = [1, 1]; |
| 18 | + // Set line width per zoom level |
| 19 | + styleConfig.layers.iml.lines.draw.lines.width = [[5, 5000], [8, 800], [10, 200], [12, 160], [14, 60], [18, 20]]; |
| 20 | + |
| 21 | + // Merge the style configuration back |
| 22 | + style.mergeConfig(styleConfig); |
| 23 | + |
| 24 | + // Add a tile layer to the map |
| 25 | + map.addLayer(new H.map.layer.TileLayer(imlProvider)); |
| 26 | +} |
| 27 | + |
| 28 | +/** |
| 29 | + * Boilerplate map initialization code starts below: |
| 30 | + */ |
| 31 | + |
| 32 | +// Step 1: initialize communication with the platform |
| 33 | +// In your own code, replace apikey value with your own apikey |
| 34 | +const platform = new H.service.Platform({ |
| 35 | + apikey: 'wuhhFoo3HHQ8Bxw68fCZe8iA_J9v4dBnRhSbkAlMup4' |
| 36 | +}); |
| 37 | +const defaultLayers = platform.createDefaultLayers(); |
| 38 | + |
| 39 | +// Step 2: initialize a map |
| 40 | +const map = new H.Map( |
| 41 | + document.getElementById('map'), |
| 42 | + defaultLayers.vector.normal.map, |
| 43 | + { |
| 44 | + center: new H.geo.Point(38.90192, -76.97605), |
| 45 | + zoom: 12 |
| 46 | + } |
| 47 | +); |
| 48 | +// Add a resize listener to make sure that the map occupies the whole container |
| 49 | +window.addEventListener('resize', () => map.getViewPort().resize()); |
| 50 | + |
| 51 | +// Step 3: make the map interactive |
| 52 | +// MapEvents enables the event system |
| 53 | +// Behavior implements default interactions for pan/zoom (also on mobile touch environments) |
| 54 | +const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); |
| 55 | + |
| 56 | +// Step 4: create the default UI component, for displaying bubbles |
| 57 | +const ui = H.ui.UI.createDefault(map, defaultLayers); |
| 58 | + |
| 59 | +// Step 5: Main logic goes here |
| 60 | +addIml(map); |
0 commit comments