Draggable Marker in Cluster

Sample Implementation

    
      
      <html>
        <head>
          <title>Draggable Marker in Cluster</title>
          <meta name="viewport" content="initial-scale=1.0">
          <meta charset="utf-8">
          <style>
          html,
          body,
          #map {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
          }
          </style>
             <script src="https://apis.mappls.com/advancedmaps/api/<Token>/map_sdk?layer=vector&v=3.0&callback=initMap1" defer async></script>
            </head>
        <body>
                    <div id="map"></div>
                        <script>
        var map, obj, geojson;

        function initMap1() {
            map = new mappls.Map('map', {
                center: [28.61, 77.23],
                zoomControl: true,
                zoom: 6,
                location: true
            });
            var canvas = map.getCanvasContainer();
            var selected = "";

            map.addListener('load', function() {
                var all_data = [];
                for (let i = 0; i < 1000; i++) {
                    let lt = randomNumber(26, 29);
                    let ln = randomNumber(76, 79);
                    obj = {
                        "type": "Feature",
                        "properties": {
                            "id": i,
                            "name": "Marker" + i,
                            'icon': "atm",
                            "icon_url": "https://apis.mapmyindia.com/map_v3/1.png",
                            "icon_size": 0.8,
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [ln, lt],
                        }
                    }
                    all_data.push(obj);
                }
                geojson = {
                    "type": "FeatureCollection",
                    "features": all_data
                };

                map.addSource('clusterData', {
                    type: 'geojson',
                    data: geojson,
                    cluster: true,
                    clusterMaxZoom: 14,
                    clusterRadius: 50
                });

                map.addLayer({
                    id: 'clusters',
                    type: 'circle',
                    source: 'clusterData',
                    filter: ['has', 'point_count'],
                    paint: {
                        'circle-color': [
                            'step',
                            ['get', 'point_count'],
                            '#51bbd6',
                            20,
                            '#f1f075',
                            50,
                            '#f28cb1',
                            100,
                            '#728FCE'
                        ],
                        'circle-radius': [
                            'step',
                            ['get', 'point_count'],
                            20,
                            20,
                            30,
                            50,
                            35,
                            100,
                            45
                        ]
                    }
                });

                map.addLayer({
                    id: 'cluster-count',
                    type: 'symbol',
                    source: 'clusterData',
                    filter: ['has', 'point_count'],
                    layout: {
                        'text-field': ['get', 'point_count_abbreviated'],
                        'text-font': ['Open Sans Regular'],
                        'text-size': 12
                    }
                });

                map.addLayer({
                    id: 'unclustered-point',
                    type: 'symbol',
                    source: 'clusterData',
                    filter: ['!', ['has', 'point_count']],
                    layout: {
                        'icon-image': ["get", 'icon_url'],
                        "icon-size": ["get", 'icon_size'],
                    }
                });

                map.on('styleimagemissing', (e) => {
                    map.loadImage(e.id, function(error, image) {
                        if (error) throw error;
                        map.addImage(e.id, image);
                    })
                });

                map.on('click', 'clusters', (e) => {
                    const features = map.queryRenderedFeatures(e.point, {
                        layers: ['clusters']
                    });
                    const clusterId = features[0].properties.cluster_id;
                    map.getSource('clusterData').getClusterExpansionZoom(
                        clusterId,
                        (err, zoom) => {
                            if (err) return;
                            map.easeTo({
                                center: features[0].geometry.coordinates,
                                zoom: zoom
                            });
                        }
                    );
                });

                map.on('click', 'unclustered-point', (e) => {
                    const coordinates = e.features[0].geometry.coordinates.slice();
                    const mag = e.features[0].properties.name;
                    const tsunami =
                        e.features[0].properties.tsunami === 1 ? 'yes' : 'no';
                    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                    }
                    new mapplsgl.Popup()
                        .setLngLat(coordinates)
                        .setHTML(
                            `magnitude: ${mag}<br>Was there a tsunami?: ${tsunami}`
                        )
                        .addTo(map);
                });
                map.on('mousedown', 'unclustered-point', function(y) {
                    y.preventDefault();
                    selected = y.features[0].properties;
                    canvas.style.cursor = 'grab';
                    map.on('mousemove', onMove);
                    map.once('mouseup', onUp);
                });
            });

            function onMove(e) {
                var coords = e.lngLat;
                var idx = geojson.features.findIndex(e => e.properties.id == selected.id)
                canvas.style.cursor = 'grabbing';
                geojson.features[idx].geometry.coordinates = [coords.lng, coords.lat];
                map.getSource('clusterData').setData(geojson);
            }

            function onUp(e) {
                var coords = e.lngLat;
                console.log(coords);
                console.log(selected);
                canvas.style.cursor = '';
                map.off('mousemove', onMove);
            }
        }

        function randomNumber(min, max) {
            return Math.random() * (max - min) + min
        }
    </script>
        </body>
      </html>
      
      
      /* First install : npm install mappls-web-maps */

      import { Component, OnInit, ElementRef } from '@angular/core';
      import { mappls } from 'mappls-web-maps';
      @Component({
      selector: 'app-root',
      template: '<div  id="map"  style="width: 99%; height: 99vh; background-color: white;"></div>',
      styleUrls: ['./app.component.css']
      })
      export class AppComponent implements OnInit {
          mapObject: any;
          mapplsClassObject = new mappls();
                  title = 'Simple Circle';
        mapProps = {
        center: [28.61, 77.23],
        zoomControl: true,
        location: true
        }

        ngOnInit() {

        this.mapplsClassObject.map({ id: "map", key: "<Token>", properties: this.mapProps }, (data: any) => {
            this.mapObject = data;


            new mappls().Circle({
            map: this.mapObject,
            center: { "lat": 28.61, "lng": 77.23 },
            radius: 5000

            });
            });
            }


              }
      
      
      /* First install : npm install mappls-web-maps */
      
      import { mappls } from  'mappls-web-maps';
      import  './App.css';
      function  App() {
      const  styleMap  = {width:  '99%', height:  '99vh', display:'inline-block'}
      var mapObject ;
      var mapplsClassObject=  new  mappls();
          const title = "Simple Circle";
    const mapProps = {zoomControl: true};
    mapplsClassObject.map(
    {
    id: "map",
    key: "<Token>",
        properties: mapProps,
        },
        (data) => {
        mapObject = data;

        mapplsClassObject.Circle({
        map: mapObject,
        center: {"lat": 28.61,"lng": 77.23 },
        radius: 5000
        });
        })
          return (
         <div  id="map"  style={styleMap}></div>
         );
      }
      export  default  App;
Request Call Back
There's so much that Mappls MapmyIndia can do for your enterprise or individual requirements. Explore our website to learn more or request a callback/email if you'd like us to connect with you.
For Solutions : +91-7829 774 111
For Gadgets : +91-9999 333 223