English

The domain 'mapr.se' uses the Swedish country-code top-level domain (.se) and has no subdomain. The second-level label 'mapr' is 4 characters long split between one vowel and 3 consonants. Breaking it apart gives 2 words: map, r. Expect 2 characters per word on average. No strong language cues emerged from the frequency lists.

sha256=:V2sIX92Uh6ZaGSFTKMHghsB85b9toJtmazgG09AI2uk=:

sha256=:RU7N55x2fpxos26u6Mrn26qPlDih4ZiqZMstWPipnGE=:

454ecde79c767e9c68b36eaee8cae7dbaa8f9438a1e198aa64cb2d58f8a99c61

92b7bcea663ef39589e678e8948508dd572dbaf97bd4bf6b137b0fb9c477092a

Add zoom and rotation controls to the map.

viewport

HSTS header missing - vulnerable to protocol downgrade attacks

CSP header missing - vulnerable to XSS attacks

Cloudflare, Inc.

UNPKG.COM

mapr.se

Cloudflare Abuse Contact

MNT-CLOUDFLARE

Cloudflare Technical Contact

CLOUDFLARENET-EU


      // XSS Protection: HTML entity escape helper
      function escapeHTML(str) {
        if (!str) return '';
        return String(str)
          .replace(/&/g, '&amp;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;')
          .replace(/"/g, '&quot;')
          .replace(/'/g, '&#39;');
      }

      const map = new maplibregl.Map({
        container: "map", // container id
        style: "https://mapr.se/maps/basic/style.json",
        center: [18.06, 59.34], // starting position
        zoom: 14.5, // starting zoom
      });

      const baseLayerVisibilities = {};

      // Create draggable markers
      const createMarker = (lngLat, color) => {
          const markerElement = document.createElement('div');
          markerElement.style.backgroundColor = color;
          markerElement.style.borderStyle = "solid";
          markerElement.style.borderColor = "white";
          markerElement.style.width = '20px';
          markerElement.style.height = '20px';
          markerElement.style.borderRadius = '50% 50% 50% 50%';
          markerElement.style.cursor = 'pointer';

          const marker = new maplibregl.Marker({
              element: markerElement,
              draggable: true
          }).setLngLat(lngLat).addTo(map);

          // Rotate the marker when the map rotates
          map.on('rotate', () => {
              const bearing = map.getBearing();
              markerElement.style.transform = `rotate(${45 - bearing}deg)`;
          });

          return marker;
      };

      const greenMarker = createMarker([18.06, 59.34], "rgba(38, 115, 73, 0.5)");
      const redMarker = createMarker([18.061, 59.341], "rgba(255, 0, 0, 0.5)");

      // Add source and layer for the route
      map.on('load', () => {
          // Record original layout visibility of base style backdrop layers, waterways, and minor features
          const layers = map.getStyle().layers;
          layers.forEach(l => {
              const isBackdrop = l.type === 'background' || l.type === 'fill' || l.type === 'fill-extrusion' || l.type === 'hillshade';
              const isWaterway = l.id.includes('waterway');
              const isMinorFeature = [
                  'road_path',
                  'road_minor',
                  'tunnel_minor',
                  'road_secondary_tertiary',
                  'railway-transit',
                  'railway',
                  'tunnel_railway_transit',
                  'aeroway-taxiway',
                  'road_pier',
                  'bridge_minor',
                  'bridge_minor case',
                  'poi_label',
                  'airport-label',
                  'place_label_other',
                  'housenumber'
              ].includes(l.id);

              if (isBackdrop || isWaterway || isMinorFeature) {
                  baseLayerVisibilities[l.id] = map.getLayoutProperty(l.id, 'visibility') || 'visible';
              }
          });

          // Add satellite source and layer
          map.addSource('satellite', {
              type: 'raster',
              //tiles: ['https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=HGms81htFFkKQJ5fLs5m'],
               tiles: ['https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_ShadedRelief_Bathymetry/default//GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpg'],
              tileSize: 256,
              maxzoom:8
          });

          let firstLayerId;
          if (layers.length > 0) {
              if (layers[0].type === 'background') {
                  firstLayerId = layers[1] ? layers[1].id : undefined;
              } else {
                  firstLayerId = layers[0].id;
              }
          }

          map.addLayer({
              id: 'satellite-layer',
              type: 'raster',
              source: 'satellite',
              layout: {
                  visibility: 'none'
              }
          }, firstLayerId);

          map.addSource('route', {
              type: 'geojson',
              data: {
                  type: 'FeatureCollection',
                  features: []
              }
          });

          map.addLayer({
              id: 'outline-route',
              type: 'line',
              source: 'route',
              layout: {
                  'line-join': 'round',
                  'line-cap': 'round'
              },
              paint: {
                  'line-color': 'magenta',
                  'line-width': 20
              }
          });

          map.addLayer({
              id: 'main-route',
              type: 'line',
              source: 'route',
              layout: {
                  'line-join': 'round',
                  'line-cap': 'round'
              },
              paint: {
                  'line-color': 'white',
                  'line-width': 5
              }
          });

          // Function to update the route
          const updateRoute = async () => {
              const start = greenMarker.getLngLat();
              const end = redMarker.getLngLat();

              try {
                const response = await fetch(`https://mapr.se/api/route/v1/pedestrian/${start.lng},${start.lat};${end.lng},${end.lat}?steps=false&overview=full&geometries=geojson`);
                const data = await response.json();
                if (data && data.routes && data.routes[0]) {
                  const routeGeoJSON = {
                      type: 'FeatureCollection',
                      features: [{
                          type: 'Feature',
                          geometry: data.routes[0].geometry
                      }]
                  };
                  map.getSource('route').setData(routeGeoJSON);
                }
              } catch (err) {
                console.error("Error updating route:", err);
              }
          };

          // Update route when markers are dragged
          greenMarker.on('dragend', updateRoute);
          redMarker.on('dragend', updateRoute);

          // Initial route
          updateRoute();
      });

      async function addGeoJSONroute() {
        try {
          map.on("load", () => {
            map.addSource("sthlmFoot", {
              type: "vector",
              url: "https://mapr.se/data/sthlmFoot.json",
            });
            map.addLayer({
              id: "sthlmFoot",
              type: "line",
              source: "sthlmFoot",
              "source-layer": "sthlmFoot",
              minzoom: 4,
              layout: {
                "line-join": "round",
                "line-cap": "round",
              },
              paint: {
                "line-color": "green",
                "line-width": 1.2,
              },
            });
          });
        } catch (error) {
          console.error("Error loading the GeoJSON route:", error);
        }
      }

      async function addGeoJSON() {
        try {
          const response = await fetch("sthlmAddress4.geojson");
          const geojson = await response.json();

          map.on("load", function () {
            // Add the GeoJSON data as a source
            map.addSource("geojson-data", {
              type: "geojson",
              data: geojson,
            });

            // Add a layer to use the GeoJSON source
            map.addLayer({
              id: "geojson-layer",
              type: "circle",
              source: "geojson-data",
              minzoom: 10,
              paint: {
                "circle-color": "grey",
                "circle-radius": 3,
              },
            });

            // Add a popup on hover or click
            const popup = new maplibregl.Popup({
              closeButton: false,
              closeOnClick: false,
            });

            map.on("mouseenter", "geojson-layer", (e) => {
              // Change the cursor style as a UI indicator
              map.getCanvas().style.cursor = "pointer";

              // Get and escape the properties
              const properties = e.features[0].properties;
              const safeStreet = escapeHTML(properties.street);
              const safePostal = escapeHTML(properties.postal);
              const safeCity = escapeHTML(properties.city);

              // Set the popup content securely
              const popupContent = `
                <strong>Street:</strong> ${safeStreet}<br>
                <strong>Postal:</strong> ${safePostal}<br>
                <strong>City:</strong> ${safeCity}
              `;

              // Set popup position and content
              popup.setLngLat(e.lngLat).setHTML(popupContent).addTo(map);
            });

            map.on("mouseleave", "geojson-layer", () => {
              map.getCanvas().style.cursor = "";
              popup.remove();
            });
          });
        } catch (error) {
          console.error("Error loading the GeoJSON file:", error);
        }
      }

      // Population Density Feature
      let popMarker = null;
      let popPopup = new maplibregl.Popup({ offset: 25 });

      // --- Distance selector control ---
      class RadiusControl {
        onAdd(map) {
          this._map = map;
          this._container = document.createElement('div');
          this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
          this._container.style.padding = '6px 8px';
          this._container.style.background = 'white';
          this._container.style.borderRadius = '4px';
          this._container.style.boxShadow = '0 0 0 2px rgba(0,0,0,.1)';
          this._container.style.display = 'flex';
          this._container.style.alignItems = 'center';
          this._container.style.gap = '6px';
          this._container.style.fontSize = '13px';
          this._container.style.fontFamily = 'Arial, sans-serif';
          this._container.innerHTML = `
            <label for="radius-input" style="white-space:nowrap;font-weight:600;">Radius (m):</label>
            <input id="radius-input" type="number" min="100" max="50000" step="100" value="1000"
              style="width:70px;padding:3px 5px;border:1px solid #ccc;border-radius:3px;font-size:13px;text-align:right;" />
          `;
          this._container.querySelector('#radius-input').addEventListener('change', () => {
            if (popMarker) fetchPopulationAndDisplay(popMarker.getLngLat());
          });
          return this._container;
        }
        onRemove() { this._container.parentNode.removeChild(this._container); this._map = undefined; }
      }
      map.addControl(new RadiusControl(), 'top-left');

      function getRadius() {
        const el = document.getElementById('radius-input');
        const v = parseInt(el?.value, 10);
        return (v && v > 0) ? v : 1000;
      }

      // --- Helper: create a GeoJSON circle polygon ---
      function createGeoJSONCircle(center, radiusMeters, points = 64) {
        const coords = [];
        const km = radiusMeters / 1000;
        const distanceX = km / (111.32 * Math.cos(center[1] * Math.PI / 180));
        const distanceY = km / 110.574;
        for (let i = 0; i < points; i++) {
          const theta = (i / points) * (2 * Math.PI);
          const x = distanceX * Math.cos(theta);
          const y = distanceY * Math.sin(theta);
          coords.push([center[0] + x, center[1] + y]);
        }
        coords.push(coords[0]); // close ring
        return { type: 'Feature', geometry: { type: 'Polygon', coordinates: [coords] } };
      }

      // --- Add circle source/layer once map loads ---
      map.on('load', () => {
        map.addSource('pop-circle', {
          type: 'geojson',
          data: { type: 'FeatureCollection', features: [] }
        });
        map.addLayer({
          id: 'pop-circle-fill',
          type: 'fill',
          source: 'pop-circle',
          paint: { 'fill-color': '#4285F4', 'fill-opacity': 0.12 }
        });
        map.addLayer({
          id: 'pop-circle-line',
          type: 'line',
          source: 'pop-circle',
          paint: { 'line-color': '#4285F4', 'line-width': 2, 'line-opacity': 0.7 }
        });
      });

      function updateCircle(lngLat, radiusMeters) {
        const src = map.getSource('pop-circle');
        if (!src) return;
        const circle = createGeoJSONCircle([lngLat.lng, lngLat.lat], radiusMeters);
        src.setData({ type: 'FeatureCollection', features: [circle] });
      }

      // --- Format number with space separator ---
      function formatNumber(n) {
        return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
      }

      // --- Right-click (desktop) or long-press (mobile) to place / move marker ---
      function placePopulationMarker(lngLat) {
        if (!popMarker) {
          popMarker = new maplibregl.Marker({ color: '#4285F4', draggable: true })
            .setLngLat(lngLat)
            .addTo(map);
          popMarker.on('dragend', () => fetchPopulationAndDisplay(popMarker.getLngLat()));
        } else {
          popMarker.setLngLat(lngLat);
        }
        fetchPopulationAndDisplay(lngLat);
      }

      // Desktop: right-click
      map.on('contextmenu', (e) => {
        placePopulationMarker(e.lngLat);
      });

      // Mobile: long-press (touchstart → hold 500ms → touchend)
      let longPressTimer = null;
      let longPressPoint = null;
      const LONG_PRESS_MS = 500;

      map.getCanvas().addEventListener('touchstart', (e) => {
        if (e.touches.length !== 1) return;
        const touch = e.touches[0];
        longPressPoint = { x: touch.clientX, y: touch.clientY };
        longPressTimer = setTimeout(() => {
          if (navigator.vibrate) navigator.vibrate(50);
          const rect = map.getCanvas().getBoundingClientRect();
          const lngLat = map.unproject([
            longPressPoint.x - rect.left,
            longPressPoint.y - rect.top
          ]);
          placePopulationMarker(lngLat);
          longPressTimer = null; // mark as fired
        }, LONG_PRESS_MS);
      }, { passive: true });

      map.getCanvas().addEventListener('touchmove', (e) => {
        if (!longPressTimer) return;
        const touch = e.touches[0];
        const dx = touch.clientX - longPressPoint.x;
        const dy = touch.clientY - longPressPoint.y;
        if (Math.sqrt(dx * dx + dy * dy) > 10) {
          clearTimeout(longPressTimer);
          longPressTimer = null;
        }
      }, { passive: true });

      map.getCanvas().addEventListener('touchend', () => {
        if (longPressTimer) {
          clearTimeout(longPressTimer);
          longPressTimer = null;
        }
      }, { passive: true });

      async function fetchPopulationAndDisplay(lngLat) {
        const radius = getRadius();
        updateCircle(lngLat, radius);
        try {
          popPopup.setHTML('Calculating population...').setLngLat(lngLat).addTo(map);
          const response = await fetch(`/api/population?lat=${lngLat.lat}&lng=${lngLat.lng}&radius=${radius}`);
          const data = await response.json();
          if (response.ok) {
            const label = radius >= 1000 ? `${(radius/1000).toLocaleString('sv-SE')} km` : `${formatNumber(radius)} m`;
            popPopup.setHTML(`<strong>Population within ${escapeHTML(label)}:</strong> ${escapeHTML(formatNumber(data.population))} people`);
          } else {
            // Secure response outputs to protect against XSS injection
            const safeErr = escapeHTML(data.error || 'Server error');
            popPopup.setHTML(`<strong>Error:</strong> ${safeErr}`);
          }
        } catch (err) {
          console.error('Error fetching population:', err);
          popPopup.setHTML(`<strong>Error:</strong> Could not reach population API.`);
        }
      }

      // Add Geolocate Control
      map.addControl(
        new maplibregl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true,
          },
          trackUserLocation: true,
        })
      );

      // Call functions
      addGeoJSON();
      addGeoJSONroute();
      
      // Satellite control definition
      class SatelliteControl {
        onAdd(map) {
          this._map = map;
          this._container = document.createElement('div');
          this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
          
          this._button = document.createElement('button');
          this._button.className = 'satellite-toggle-btn';
          this._button.type = 'button';
          this._button.title = 'Toggle Satellite';
          this._button.style.width = '29px';
          this._button.style.height = '29px';
          this._button.style.border = 'none';
          this._button.style.borderRadius = '4px';
          this._button.style.cursor = 'pointer';
          this._button.style.display = 'flex';
          this._button.style.alignItems = 'center';
          this._button.style.justifyContent = 'center';
          this._button.style.padding = '0';
          this._button.style.background = 'white';

          this._button.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style="fill: #333; transition: fill 0.2s;">
              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5-10-5-10 5zm0-5l10 5 10-5-10-5-10 5z"/>
            </svg>
          `;

          const svg = this._button.querySelector('svg');

          this._button.addEventListener('click', () => {
            const isVisible = this._map.getLayoutProperty('satellite-layer', 'visibility') === 'visible';
            if (isVisible) {
              this._map.setLayoutProperty('satellite-layer', 'visibility', 'none');
              this._button.classList.remove('active');
              this._button.style.backgroundColor = 'white';
              svg.style.fill = '#333';

              // Show base style layers
              Object.keys(baseLayerVisibilities).forEach(id => {
                this._map.setLayoutProperty(id, 'visibility', baseLayerVisibilities[id]);
              });
            } else {
              this._map.setLayoutProperty('satellite-layer', 'visibility', 'visible');
              this._button.classList.add('active');
              this._button.style.backgroundColor = '#4285F4';
              svg.style.fill = 'white';

              // Hide base style layers
              Object.keys(baseLayerVisibilities).forEach(id => {
                this._map.setLayoutProperty(id, 'visibility', 'none');
              });
            }
          });

          this._container.appendChild(this._button);
          return this._container;
        }
        onRemove() {
          this._container.parentNode.removeChild(this._container);
          this._map = undefined;
        }
      }

      map.addControl(new SatelliteControl(), 'top-right');
      
      // Add zoom and rotation controls to the map.
      map.addControl(new maplibregl.NavigationControl());
    

Requests	IP Address	Location	AS Autonomous System
3	188.114.97.9Cloudflare · WAF	United States	AS13335Cloudflare, Inc.
1	104.18.1.22Cloudflare · WAF	United States	AS13335Cloudflare, Inc.
1	104.18.0.22Cloudflare · WAF	United States	AS13335Cloudflare, Inc.
5	3	-	-

Security Scan Report: mapr.se

Summary

AI Security Verdict

Safe Website

Details

Screenshot

Page Load Overview

Language Analysis

Primary Language

Detection Details

Website Classification

Primary Category

All Detected Categories

Detected Features

Domain & IP Information

Detected Technologies3

Content Similarity HashesFor malware variant detection

TLSH (Trend Micro Locality Sensitive Hash)

ssdeep (Context Triggered Piecewise Hashing)

sdhash (Similarity Digest Hashing)

Image Hashes

Perceptual Hashes

Other Hashes

Scan History