How to use the leaflet.circleMarker function in leaflet

To help you get started, we’ve selected a few leaflet examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github dkocich / osm-pt-ngx-leaflet / public_src / services / edit.service.ts View on Github external
this.addChange(rel, 'toggle members', change);

      console.log(
        'LOG (editing s.) Array highlight',
        Array.from(this.storageSrv.elementsToHighlight.values()),
      );
      const clickedNode: IPtStop = this.storageSrv.elementsMap.get(
        featureId,
      );

      // create array of circles to highlight and add to map
      let membersHighlight = [];
      for (let id of Array.from(this.storageSrv.elementsToHighlight.values())) {
        const node = this.storageSrv.elementsMap.get(id);
        console.log('LOG (editing s.) Creating circle for node:', node);
        let circle = L.circleMarker([node.lat, node.lon], {
          radius : 15,
          color  : '#00ffff',
          opacity: 0.75,
        });
        console.log('LOG (editing s.) Created circle:', circle);
        membersHighlight.push(circle);
      }
      console.log(
        'LOG (editing s.) Show all circles array membersHighlight:',
        membersHighlight,
      );
      this.mapSrv.membersHighlightLayer = L.layerGroup(membersHighlight);
      this.mapSrv.membersHighlightLayer.addTo(this.mapSrv.map);
    }
  }
github CS-Tao / GTD-Visualization / src / renderer / components / MapView / TimeAnalysisMapView.vue View on Github external
pointToLayer: function (geoJsonPoint, latlng) {
            const pointOptions = {
              radius: 2,
              stroke: false,
              color: '#E65217',
              weight: 1,
              opacity: 1,
              fill: true,
              fillOpacity: 1
            // render: L.svg(),
            // className: 'main-point-marker'
            }
            const layer = L.circleMarker(latlng, pointOptions)
            layer.id = geoJsonPoint.id
            return L.circleMarker(latlng, pointOptions)
          }
        }
github tadata-ru / dtp-stat / frontend / js / components / Map.js View on Github external
mvcs.forEach(mvc => {
            let marker = new L.circleMarker([mvc.latitude, mvc.longitude], this.getMarkerOptions(mvc));
            const date = moment(mvc.datetime);
            const actionName = getMvcTypeName(mvc, this.props.dictionaries);
            const tooltipText = `${date.format('DD.MM.YYYY HH:mm')}<br>${actionName}<br>Пострадали - ${mvc.injured}, погибли - ${mvc.dead}`;

            marker.bindTooltip(tooltipText);
            this.mvcPointsLayer.addLayer(marker);
            this.markers.push(marker);
        });
github dkocich / osm-pt-ngx-leaflet / public_src / services / map.service.ts View on Github external
const latlngTo = this.getLastNode();

    const from: string = 'Tag from: ' + rel.tags.from || '#FROM';
    const to: string = 'Tag to: ' + rel.tags.to || '#TO';
    const route: string = rel.tags.route || '#ROUTE';
    const ref: string = rel.tags.ref || '#REF';

    this.markerTo = L.circleMarker(latlngTo, Utils.FROM_TO_LABEL).bindTooltip(
      to + ' (' + route + ' ' + ref + ')',
      {
        className: 'from-to-label',
        offset: [0, 0],
        permanent: true,
      },
    );
    this.markerFrom = L.circleMarker(latlngFrom, Utils.FROM_TO_LABEL).bindTooltip(
      from + ' (' + route + ' ' + ref + ')',
      {
        className: 'from-to-label',
        offset: [0, 0],
        permanent: true,
      },
    );
    if (this.highlight) {
      this.highlight.addLayer(this.markerFrom, this.markerTo);
    } else {
      this.highlight = L.layerGroup([this.markerFrom, this.markerTo]);
    }
  }
github perliedman / leaflet-control-geocoder / src / geocoders / pelias.js View on Github external
pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng);
      },
      onEachFeature: function(feature, layer) {
github wladich / nakarte / src / lib / leaflet.control.locate / index.js View on Github external
accuracyCircle: L.circle([0, 0], {
                radius: 1,
                interactive: false,
                fillColor: '#4271a8',
                color: '#2ba3f7',
                weight: 2
            }),
            markerCircle: L.circleMarker([0, 0], {
                interactive: false,
                radius: 10,
                color: '#2ba3f7',
                weight: 2.5,
                fill: null,
                opacity: 0.8
            }),
            markerPoint: L.circleMarker([0, 0], {
                interactive: false,
                radius: 2,
                weight: 0,
                color: '#2ba3f7',
                fillOpacity: 0.8
            }),
        };
        this.addLayer(this._elements.accuracyCircle);

    },
github nreese / enhanced_tilemap / public / POIs.js View on Github external
pointToLayer: function (feature, latlng) {
              return L.circleMarker(
                latlng,
                {
                  radius: 6
                });
            },
            style: {
github luqmaan / Instabus / src / js / LocateControl.js View on Github external
createMarkers: function() {
        this.innerMarker = leaflet.circleMarker(this.userLatLng,{
            weight: 0,
            fillColor: 'rgb(16,94,251)',
            fill: true,
            fillOpacity: 1,
            radius: 5
        });
        this.outerMarker = leaflet.circleMarker(this.userLatLng, {
            color: 'rgb(20,130,210)',
            opacity: 1,
            weight: 2,
            fillColor: 'rgb(108,196,253)',
            fill: true,
            fillOpacity: 0.4,
            radius: 15
        });
        this.outerMarker.addTo(this.map);
github grommet / grommet-people-finder / src / js / components / Map.js View on Github external
setMap() {
    const map = this.state.map;
    map.setView([this.state.latitude, this.state.longitude], 5);
    Leaflet.tileLayer(
      'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB',
      }).addTo(map);
    const circle = Leaflet.circleMarker(
      [this.state.latitude, this.state.longitude], {
        color: '#FF8D6D',
        opacity: 0.8,
        fillOpacity: 0.8,
      }).addTo(map);

    const directionsLink = (
      `<br><a href="http://maps.google.com/maps?saddr=${this.state.latitude},${this.state.longitude}"><span>(Directions)</span></a>`
    );
    const address = `<h5><strong>${this.props.title}</strong></h5>
      ${this.renderAddress().join('<br>')}
      ${directionsLink}`;
    circle.bindPopup(address).openPopup();
  }
github Esri / esri-leaflet-renderers / src / Symbols / PointSymbol.js View on Github external
return L.marker(latlng, layerOptions);
    }
    size = this.pixelValue(size);

    switch (this._symbolJson.style) {
      case 'esriSMSSquare':
        return squareMarker(latlng, size, L.extend({}, this._styles, options));
      case 'esriSMSDiamond':
        return diamondMarker(latlng, size, L.extend({}, this._styles, options));
      case 'esriSMSCross':
        return crossMarker(latlng, size, L.extend({}, this._styles, options));
      case 'esriSMSX':
        return xMarker(latlng, size, L.extend({}, this._styles, options));
    }
    this._styles.radius = size / 2.0;
    return L.circleMarker(latlng, L.extend({}, this._styles, options));
  }
});