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>
Improve this question

1 Answer 1

Reset to default
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

Improve this answer
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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