4

I would like to move a marker cursor at the same position and the same time as the default cursor over a Mapbox map when is moved active map cursor.

It's an application with two divs with a map in every div, but by default only appears one cursor over the active map, see JSFiddle: https://jsfiddle.net/6q2mdn3f/

I need to show two cursors, attached image with left map showing an arrow but, how can I do it?

enter image description here

<html lang="en">

<head>
  <title>2 Mapes - Mapbox</title>
  <meta charset="UTF-8">
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css' rel='stylesheet' />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

  <style>
    body {
      margin: 0px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    #map,
    #map2 {
      position: absolute;
      top: 0px;
      bottom: 0px;
      width: 100%;
      border: 1px solid black;
    }

    #map2 {
      right: 0px;
    }

    #divider {
      background-color: gray;
      width: 8px;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="map"></div>
    <div id="divider"></div>
    <div id="map2"></div>
  </div>

  <script>
    window.onload = function () { mapBoxInit(); }

    window.onresize = function () {
      setWindowSize();
    }

    function setWindowSize() {
      var width = (window.innerWidth - 6) / 2;
      d3.select("#map").style("width", width + "px")
      d3.select("#map2").style("width", width + "px")
    }
    setWindowSize();

    function mapBoxInit() {

      // mapbox access token
      mapboxgl.accessToken = 'pk.eyJ1IjoiYm9lcmljIiwiYSI6IkZEU3BSTjQifQ.XDXwKy2vBdzFEjndnE4N7Q';

      // define the first map
      var map = new mapboxgl.Map({
        container: 'map',
        maxZoom: 14, //13
        minZoom: 4,
        zoom: 12,
        center: [-0.1, 51.51],
        //style: 'mapbox://styles/mapbox/bright-v8',
        //style: 'topo-raster-tiles.json',
        style: 'https://geoserveis.icgc.cat/contextmaps/icgc.json',
        hash: false
      });

      // Add zoom and rotation controls to the map.
      map.addControl(new mapboxgl.NavigationControl());

      // define the second map
      var map2 = new mapboxgl.Map({
        container: 'map2',
        maxZoom: 14, //13
        minZoom: 4,
        zoom: 11,
        center: [-0.1, 51.51],
        style: 'mapbox://styles/mapbox/bright-v8',
        hash: false
      });

      // Add zoom and rotation controls to the map.
      map2.addControl(new mapboxgl.NavigationControl());

      // coordination between the two maps
      var disable = false;
      map.on("move", function () {
        if (!disable) {
          var center = map.getCenter();
          var zoom = map.getZoom();
          var pitch = map.getPitch();
          var bearing = map.getBearing();

          disable = true;
          map2.setCenter(center);
          map2.setZoom(zoom);
          map2.setPitch(pitch);
          map2.setBearing(bearing);
          disable = false;
        }
      })

      map2.on("move", function () {
        if (!disable) {
          var center = map2.getCenter();
          var zoom = map2.getZoom();
          var pitch = map2.getPitch();
          var bearing = map2.getBearing();

          disable = true;
          map.setCenter(center);
          map.setZoom(zoom);
          map.setPitch(pitch);
          map.setBearing(bearing);
          disable = false;
        }
      })

    }
  </script>

</body>

</html>

1 Answer 1

11
+50

Add this style (change url):

.marker {
    background-image: url('cursor.png');
    background-size: cover;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

cursor.png -> enter image description here

Add this script into mapBoxInit (change anchor. It is 'top-left' for the image I use):

var el = document.createElement('div');
el.className = 'marker';

var marker = new mapboxgl.Marker(el, {anchor:'top-left'});

map.on("mousemove", function (e) {
    marker.setLngLat(e.lngLat).addTo(map2);
});

map2.on("mousemove", function (e) {
    marker.setLngLat(e.lngLat).addTo(map);
});

Result:

enter image description here

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.