npm - @abi-software/flatmap-viewer - Versions diffs - 2.7.2 → 2.7.3-a.2 - Mend

@abi-software/flatmap-viewer 2.7.2 → 2.7.3-a.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (120) hide show

package/thirdParty/maplibre-gl-svg/examples/All built-in SVG templates as symbols.html DELETED Viewed

@@ -1,124 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>All built-in SVG templates as symbols</title>
-    <meta charset='utf-8'>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css' />
-    <script src='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
-    <script src="../dist/maplibre-gl-svg.js"></script>
-    <style>
-        body { margin: 0; padding: 0; }
-        html, body { height: 100%; }
-        #map { position: relative; width:100%; height:100%; }
-        fieldset { position: absolute; top: 10px; left: 10px; width: 300px;z-index: 1; background-color: white;}
-        legend {background-color: white;border-radius: 5px;border:1px solid #000;}
-    </style>
-</head>
-<body>
-<div id="map"></div>
-<fieldset>
-    <legend>All built-in SVG templates as symbols</legend>
-    This sample shows all the built-in icon templates rendered on a symbol layer. The primary color is teal and the secondary color is white.
-</fieldset>
-<script>
-    const center = [20, -10];
-    var marker, svgManager;
-    var datasource = {
-        'type': 'FeatureCollection',
-        'features': []
-    };
-    var imagePromises = [];
-    const map = new maplibregl.Map({
-        container: 'map',
-        center: center,
-        zoom: 4,
-        style: {
-            'version': 8,
-            'sources': {
-            },
-            'layers': [
-                {
-                    "id": "background",
-                    "type": "background",
-                    "paint": {
-                        "background-color": "gray"
-                    }
-                }
-            ],
-            "glyphs": "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
-        },
-    });
-    map.on('load', () => {
-        //Create a new instance of the SVG manager.
-        svgManager = new maplibregl.SvgManager(map);
-        //Get all image templates available in the map control.
-        var keys = maplibregl.SvgTemplateManager.getAllTemplateNames();
-        //Create a grid of points, each using a different SVG template.
-        var cols = 6;
-        var rows = Math.ceil(keys.length / cols);
-        for (var row = 0; row < rows; row++) {
-            for (var col = 0; col < cols; col++) {
-                var idx = cols * row + col;
-                if (idx < keys.length) {
-                    createIcon(keys[idx], row, col);
-                }
-            }
-        }
-        //Load the SVG template promises all at once.
-        Promise.all(imagePromises).then(() => {
-            //Add a layer to display the points.
-            map.addLayer({
-                'id': 'points-layer',
-                'type': 'symbol',
-                'source': {
-                    'type': 'geojson',
-                    'data': datasource
-                },
-                'layout': {
-                    'icon-image': ['get', 'imageId'],
-                    'icon-allow-overlap': true,
-                    'icon-ignore-placement': true,
-                    'text-field': ['get', 'imageId'],
-                    'text-offset': [0, 2],
-                    'text-allow-overlap': true,
-                    'text-ignore-placement': true,
-                    'text-font': ['Open Sans Semibold'],
-                    'text-size': 12,
-                    'text-anchor': 'top'
-                }
-            });
-        });
-    });
-    function createIcon(id, row, col) {
-        //Capture the promise to create the image from the template.
-        imagePromises.push(svgManager.createFromTemplate(id, id, 'teal', '#fff', 1));
-        //Add a point to the data source to render the image.
-        datasource.features.push({
-            'type': 'Feature',
-            'properties': {
-                'imageId': id
-            },
-            'geometry': {
-                'type': 'Point',
-                'coordinates': [8 * col, -3.5 * row]
-            }
-        });
-    }
-</script>
-</body>
-</html>

package/thirdParty/maplibre-gl-svg/examples/Fill polygon with built-in SVG template.html DELETED Viewed

@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>Fill polygon with built-in SVG template</title>
-    <meta charset='utf-8'>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css' />
-    <script src='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
-    <script src="../dist/maplibre-gl-svg.js"></script>
-    <style>
-        body { margin: 0; padding: 0; }
-        html, body { height: 100%; }
-        #map { position: relative; width:100%; height:100%; }
-        fieldset { position: absolute; top: 10px; left: 10px; width: 300px;z-index: 1; background-color: white;}
-        legend {background-color: white;border-radius: 5px;border:1px solid #000;}
-    </style>
-</head>
-<body>
-<div id="map"></div>
-<fieldset>
-    <legend>Fill polygon with built-in SVG template</legend>
-    This sample shows how to use an SVG template as a fill pattern for a polygon.
-</fieldset>
-<script>
-    var marker, svgManager;
-    const map = new maplibregl.Map({
-        container: 'map',
-        style: {
-            'version': 8,
-            'sources': {
-                'osm-tiles': {
-                    'type': 'raster',
-                    'tiles': [ 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' ],
-                    'tileSize': 256,
-                    'attribution': '&copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a>'
-                }
-            },
-            'layers': [
-                {
-                    'id': 'osm-tiles',
-                    'type': 'raster',
-                    'source': 'osm-tiles',
-                    'minzoom': 0,
-                    'maxzoom': 19
-                }
-            ]
-        },
-        zoom: 2
-    });
-    map.on('load', () => {
-        //Create a new instance of the SVG manager.
-        svgManager = new maplibregl.SvgManager(map);
-        //Load an SVG templated icon into the map.
-        svgManager.createFromTemplate('myFillPattern', 'dots', 'red', 'transparent').then(() => {
-            //Add a layer to display a filled polygon.
-            map.addLayer({
-                'id': 'fill-layer',
-                'type': 'fill',
-                'source': {
-                    'type': 'geojson',
-                    'data': {
-                        'type': 'FeatureCollection',
-                        'features': [
-                            {
-                                'type': 'Feature',
-                                'properties': {
-                                },
-                                'geometry': {
-                                    'type': 'Polygon',
-                                    'coordinates': [[[-50, -20], [0, 40], [50, -20], [-50, -20]]]
-                                }
-                            }
-                        ]
-                    }
-                },
-                'paint': {
-                    //Apply the fill pattern.
-                    'fill-pattern': 'myFillPattern',
-                    'fill-opacity': 1
-                }
-            });
-        });
-    });
-</script>
-</body>
-</html>

package/thirdParty/maplibre-gl-svg/examples/HTML Marker with Custom SVG Template.html DELETED Viewed

@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>HTML Marker with Custom SVG Template</title>
-    <meta charset='utf-8'>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css' />
-    <script src='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
-    <script src="../dist/maplibre-gl-svg.js"></script>
-    <style>
-        body { margin: 0; padding: 0; }
-        html, body { height: 100%; }
-        #map { position: relative; width:100%; height:100%; }
-        fieldset { position: absolute; top: 10px; left: 10px; width: 300px;z-index: 1; background-color: white;}
-        legend {background-color: white;border-radius: 5px;border:1px solid #000;}
-    </style>
-</head>
-<body>
-<div id="map"></div>
-<fieldset>
-    <legend>HTML Marker with Custom SVG Template</legend>
-    This sample shows how to create a custom SVG template and use it with the Html Marker class.
-    <br/><br/>
-    <input type="button" value="Update marker color" onclick="updateMarker()">
-</fieldset>
-<script>
-    const center = [-74.5, 40];
-    var marker;
-    const map = new maplibregl.Map({
-        container: 'map',
-        style: {
-            'version': 8,
-            'sources': {
-                'osm-tiles': {
-                    'type': 'raster',
-                    'tiles': [ 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' ],
-                    'tileSize': 256,
-                    'attribution': '&copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a>'
-                }
-            },
-            'layers': [
-                {
-                    'id': 'osm-tiles',
-                    'type': 'raster',
-                    'source': 'osm-tiles',
-                    'minzoom': 0,
-                    'maxzoom': 19
-                }
-            ]
-        },
-        center: center, // starting position
-        zoom: 2 // starting zoom
-    });
-    map.on('load', () => {
-        // Add a custom SVG template to SvgTemplateManager.
-        maplibregl.SvgTemplateManager.addTemplate('myCustomTemaplate', '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="37" viewBox="0 0 30 37" xml:space="preserve"><rect x="0" y="0" rx="8" ry="8" width="30" height="30" fill="{color}"/><polygon fill="{color}" points="10,29 20,29 15,37 10,29"/><text x="15" y="20" style="font-size:16px;font-family:arial;fill:#ffffff;" text-anchor="middle">{text}</text></svg>');
-        // Create marker element from our custom SVG template.
-        const el = maplibregl.SvgTemplateManager.getElement('myCustomTemaplate', 'AB', 'red');
-        // Add marker to map
-        marker = new maplibregl.Marker({
-            element: el,
-            anchor: 'bottom'
-        }).setLngLat(center).addTo(map);
-    });
-    function updateMarker() {
-        //Get a random color.
-        const color = '#' + Math.floor(Math.random()*16777215).toString(16);
-        //Create a new marker element from SVG template. If desired, a completely new template could be used.
-        const el = maplibregl.SvgTemplateManager.getElement('myCustomTemaplate', 'AB', color);
-        //Replace the inner HTML of the marker with the new SVG template.
-        marker.getElement().innerHTML = el.innerHTML;
-    }
-</script>
-</body>
-</html>

package/thirdParty/maplibre-gl-svg/examples/HTML Marker with built-in SVG template.html DELETED Viewed

@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>HTML Marker with built-in SVG template</title>
-    <meta charset='utf-8'>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css' />
-    <script src='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
-    <script src="../dist/maplibre-gl-svg.js"></script>
-    <style>
-        body { margin: 0; padding: 0; }
-        html, body { height: 100%; }
-        #map { position: relative; width:100%; height:100%; }
-        fieldset { position: absolute; top: 10px; left: 10px; width: 300px;z-index: 1; background-color: white;}
-        legend {background-color: white;border-radius: 5px;border:1px solid #000;}
-    </style>
-</head>
-<body>
-<div id="map"></div>
-<fieldset>
-    <legend>HTML Marker with built-in SVG template</legend>
-    This sample shows how use SVG templates with an HTML marker, and how to update the marker with a new template.
-    <br/><br/>
-    <input type="button" value="Update marker color" onclick="updateMarker()">
-</fieldset>
-<script>
-    const center = [-74.5, 40];
-    var marker;
-    const map = new maplibregl.Map({
-        container: 'map',
-        style: {
-            'version': 8,
-            'sources': {
-                'osm-tiles': {
-                    'type': 'raster',
-                    'tiles': [ 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' ],
-                    'tileSize': 256,
-                    'attribution': '&copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a>'
-                }
-            },
-            'layers': [
-                {
-                    'id': 'osm-tiles',
-                    'type': 'raster',
-                    'source': 'osm-tiles',
-                    'minzoom': 0,
-                    'maxzoom': 19
-                }
-            ]
-        },
-        center: center, // starting position
-        zoom: 2 // starting zoom
-    });
-    map.on('load', () => {
-        // Create marker element from SVG template.
-        const el = maplibregl.SvgTemplateManager.getElement('marker-arrow', 'AB', 'red', 'pink');
-        // Add marker to map
-        marker = new maplibregl.Marker({
-            element: el,
-            anchor: 'bottom'
-        }).setLngLat(center).addTo(map);
-    });
-    function updateMarker() {
-        //Get a random color.
-        const color = '#' + Math.floor(Math.random()*16777215).toString(16);
-        //Create a new marker element from SVG template. If desired, a completely new template could be used.
-        const el = maplibregl.SvgTemplateManager.getElement('marker-arrow', 'AB', color, 'pink');
-        //Replace the inner HTML of the marker with the new SVG template.
-        marker.getElement().innerHTML = el.innerHTML;
-    }
-</script>
-</body>
-</html>

package/thirdParty/maplibre-gl-svg/examples/Line layer with built-in SVG template.html DELETED Viewed

@@ -1,129 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>Line layer with built-in SVG template</title>
-    <meta charset='utf-8'>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css' />
-    <script src='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
-    <script src="../dist/maplibre-gl-svg.js"></script>
-    <style>
-        body { margin: 0; padding: 0; }
-        html, body { height: 100%; }
-        #map { position: relative; width:100%; height:100%; }
-        fieldset { position: absolute; top: 10px; left: 10px; width: 300px;z-index: 1; background-color: white;}
-        legend {background-color: white;border-radius: 5px;border:1px solid #000;}
-    </style>
-</head>
-<body>
-<div id="map"></div>
-<fieldset>
-    <legend>Line layer with built-in SVG template</legend>
-    This sample shows how to use a built-in SVG template with a line layer.
-</fieldset>
-<script>
-    const center = [-74.5, 40];
-    var marker, svgManager;
-    const map = new maplibregl.Map({
-        container: 'map',
-        center: [-122.135, 47.65],
-        zoom: 12,
-        style: {
-            'version': 8,
-            'sources': {
-                'osm-tiles': {
-                    'type': 'raster',
-                    'tiles': [ 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' ],
-                    'tileSize': 256,
-                    'attribution': '&copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a>'
-                }
-            },
-            'layers': [
-                {
-                    'id': 'osm-tiles',
-                    'type': 'raster',
-                    'source': 'osm-tiles',
-                    'minzoom': 0,
-                    'maxzoom': 19
-                }
-            ]
-        }
-    });
-    map.on('load', () => {
-        //Create a new instance of the SVG manager.
-        svgManager = new maplibregl.SvgManager(map);
-        //Load an SVG templated icon into the map.
-        svgManager.createFromTemplate('myTemplatedImage', 'car', 'DodgerBlue', '#fff').then(() => {
-            //Add a source for thelines.
-            map.addSource('lines', {
-                'type': 'geojson',
-                'data': {
-                    'type': 'FeatureCollection',
-                    'features': [
-                        {
-                            'type': 'Feature',
-                            'properties': {
-                            },
-                            'geometry': {
-                                'type': 'LineString',
-                                'coordinates': [
-                                    [-122.18822, 47.63208],
-                                    [-122.18204, 47.63196],
-                                    [-122.17243, 47.62976],
-                                    [-122.16419, 47.63023],
-                                    [-122.15852, 47.62942],
-                                    [-122.15183, 47.62988],
-                                    [-122.14256, 47.63451],
-                                    [-122.13483, 47.64041],
-                                    [-122.13466, 47.64422],
-                                    [-122.13844, 47.65440],
-                                    [-122.13277, 47.66515],
-                                    [-122.12779, 47.66712],
-                                    [-122.11595, 47.66712],
-                                    [-122.11063, 47.66735],
-                                    [-122.10668, 47.67035],
-                                    [-122.10565, 47.67498]
-                                ]
-                            }
-                        }
-                    ]
-                }
-            });
-            //Add a layer to display the lines.
-            map.addLayer({
-                'id': 'lines',
-                'type': 'line',
-                'source': 'lines',
-                'paint': {
-                    'line-width': 5,
-                    'line-color': 'Blue'
-                }
-            });
-            //Add a layer for symbols along the line.
-            map.addLayer({
-                'id': 'line-symbols',
-                'type': 'symbol',
-                'source': 'lines',
-                'layout': {
-                    //Reference the templated icon.
-                    'icon-image': 'myTemplatedImage',
-                    'symbol-placement': 'line',
-                    'symbol-spacing': 100,
-                    'icon-rotate': 90
-                }
-            });
-        });
-    });
-</script>
-</body>
-</html>

package/thirdParty/maplibre-gl-svg/examples/Load SVG from URL.html DELETED Viewed

@@ -1,96 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>Load SVG from URL</title>
-    <meta charset='utf-8'>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css' />
-    <script src='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
-    <script src="../dist/maplibre-gl-svg.js"></script>
-    <style>
-        body { margin: 0; padding: 0; }
-        html, body { height: 100%; }
-        #map { position: relative; width:100%; height:100%; }
-        fieldset { position: absolute; top: 10px; left: 10px; width: 300px;z-index: 1; background-color: white;}
-        legend {background-color: white;border-radius: 5px;border:1px solid #000;}
-    </style>
-</head>
-<body>
-<div id="map"></div>
-<fieldset>
-    <legend>Load SVG from URL</legend>
-    This sample shows how to load an SVG from a URL into the map and display it as a symbol.
-</fieldset>
-<script>
-    var marker, svgManager;
-    const map = new maplibregl.Map({
-        container: 'map',
-        style: {
-            'version': 8,
-            'sources': {
-                'osm-tiles': {
-                    'type': 'raster',
-                    'tiles': [ 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' ],
-                    'tileSize': 256,
-                    'attribution': '&copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a>'
-                }
-            },
-            'layers': [
-                {
-                    'id': 'osm-tiles',
-                    'type': 'raster',
-                    'source': 'osm-tiles',
-                    'minzoom': 0,
-                    'maxzoom': 19
-                }
-            ]
-        },
-        zoom: 2
-    });
-    map.on('load', () => {
-        //Create a new instance of the SVG manager.
-        svgManager = new maplibregl.SvgManager(map);
-        //Load an SVG templated icon into the map.
-        svgManager.add('myTemplatedImage', '../assets/Smiley_face_changed.svg').then(() => {
-            //Optionally set the max width/height of the image.
-            //svgManager.add('myTemplatedImage', '../assets/Smiley_face_changed.svg', 30, 30).then(() => {
-            //Add a layer to display a filled polygon.
-            map.addLayer({
-                'id': 'symbol-layer',
-                'type': 'symbol',
-                'source': {
-                    'type': 'geojson',
-                    'data': {
-                        'type': 'FeatureCollection',
-                        'features': [
-                            {
-                                'type': 'Feature',
-                                'properties': {
-                                },
-                                'geometry': {
-                                    'type': 'Point',
-                                    'coordinates': [0,0]
-                                }
-                            }
-                        ]
-                    }
-                },
-                'layout': {
-                    //Reference the templated icon.
-                    'icon-image': 'myTemplatedImage'
-                }
-            });
-        });
-    });
-</script>
-</body>
-</html>