How to use the leaflet.marker 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 vue-leaflet / Vue2Leaflet / src / components / LMarker.vue View on Github external
mounted () {
    const options = optionsMerger({
      ...this.layerOptions,
      icon: this.icon,
      zIndexOffset: this.zIndexOffset,
      draggable: this.draggable
    }, this);
    this.mapObject = marker(this.latLng, options);
    DomEvent.on(this.mapObject, this.$listeners);
    this.mapObject.on('move', debounce(this.latLngSync, 100));
    propsBinder(this, this.mapObject, this.$options.props);
    this.parentContainer = findRealParent(this.$parent);
    this.parentContainer.addLayer(this, !this.visible);
    this.ready = true;
    this.$nextTick(() => {
      this.$emit('ready', this.mapObject);
    });
  },
  methods: {
github WikiWatershed / model-my-watershed / src / mmw / js / src / core / views.js View on Github external
renderSearchResult: function() {
        var point = this.model.get('searchResult');

        this._searchResultLayer.clearLayers();

        if (point && _.isArray(point) && point.length === 2) {
            this._searchResultLayer.addLayer(L.marker(point));
        }
    }
});
github datagovsg / beeline-frontend / beeline / leaflet / CdGmapMarker.js View on Github external
ctrl.map.$mapPromise.then((gmap) => {
          const options = optionsFromProps(props, scope, [])
          scope.$markerObject = new L.marker(options.latLng).addTo(gmap)

          scope.$on('$destroy', () => {
            scope.$markerObject.remove()
          })

          setUpWatchers(props, scope, scope.$markerObject)
          setUpEvents(events, scope, scope.$markerObject)
        })
      }
github dkocich / osm-pt-ngx-leaflet / public_src / services / edit.service.ts View on Github external
creatingElementOfType: string,
    event: any,
    newId: number,
  ): any {
    let iconUrl;
    switch (creatingElementOfType) {
      case 'stop':
        iconUrl = require('../assets/transport/bus.png');
        break;
      case 'platform':
        iconUrl = require('../assets/transport/platform.png');
        break;
      default:
        iconUrl = require('../../node_modules/leaflet/dist/images/marker-icon.png');
    }
    const marker                = L.marker(event['latlng'], {
      icon       : L.icon({
        iconAnchor: [10, 10],
        iconUrl,
      }),
      draggable  : true,
      opacity    : 0.8,
      riseOnHover: true,
    }).bindPopup('New ' + creatingElementOfType + ' #' + newId, {
      offset: L.point(12, 6),
    });
    marker.options['featureId'] = newId;
    marker.options['lat']       = event['latlng'].lat;
    marker.options['lng']       = event['latlng'].lng;
    return marker;
  }
github trynmaps / metrics-mvp / frontend / src / screens / Isochrone.jsx View on Github external
{circle.tripItems.map((item, index) => (
                <div>
                  <em>{item.t.toFixed(1)} min</em>: {item.desc}
                </div>
              ))}
              {option.walkMin &gt; 0.05 &amp;&amp; circle.tripItems.length ? (
                <div>
                  <em>{option.walkMin.toFixed(1)} min</em>: walk to destination
                </div>
              ) : null}
            ,
          );
        }
      }

      const marker = L.marker(endLatLng, { icon: redIcon }).addTo(map);

      this.tripLayers.push(marker);

      this.setState({ tripInfo });
    }
  }
github taylorrohrich / fortnite_challenges / website / src / functions.js View on Github external
"<br>" +
        (coordinate.credit
          ? "credit: " +
            (coordinate.refLink
              ? "<a href="+
                coordinate.refLink +"><img style="height:auto;width:15px;margin-left:5px;margin-right:5px" src="+
                youtube +"></a>"
              : "") +
            coordinate.credit
          : "")
      : description
  );
  return L.marker([coordinate.x * length, coordinate.y * length], {
    icon: decideIcon(icon)
  }).bindPopup(popup);
}
export function populateMap(data, length, group) {
github naturalatlas / leaflet-transitionedicon / demo / index.js View on Github external
function createMarkers() {
	var lat, lon;
	var count = 50 + Math.round(Math.random() * 5);
	var jitter = 0.03;
	var markers = [];
	for (var i = 0; i &lt; count; i++) {
		lat = origin_lat + (Math.random() * jitter - (jitter / 2));
		lon = origin_lon + (Math.random() * jitter - (jitter / 2));
		markers.push(L.marker([lat, lon], {icon: new MyIcon()}).addTo(map));
	}

	var lifetime = 1000 + Math.round(Math.random() * 2000);
	setTimeout(function() {
		for (var i = 0; i &lt; count; i++) {
			map.removeLayer(markers[i]);
		}
		setTimeout(createMarkers, 10);
	}, lifetime);
}
github thingsboard / thingsboard / ui / src / app / widget / lib / tripAnimation / trip-animation-widget.js View on Github external
function moveMarker(trip) {
        let postionMarker = calculateCurrentDate(trip.timeRange, vm.index);
        if (angular.isDefined(postionMarker)) {
            if (angular.isDefined(trip.marker)) {
                trip.markerAngleIsSet = true;
                trip.marker.setLatLng(postionMarker.latLng);
                trip.marker.setRotationAngle(postionMarker.angle);
                trip.marker.update();
            } else {
                if (trip.timeRange && trip.timeRange.length) {
                    trip.marker = L.marker(postionMarker.latLng);
                    trip.marker.setZIndexOffset(1000);
                    trip.marker.setIcon(vm.staticSettings.icon);
                    trip.marker.setRotationOrigin('center center');
                    trip.marker.on('click', function () {
                        showHideTooltip(trip);
                    });
                    trip.marker.addTo(vm.map.map);
                    trip.marker.update();
                }
            }
        }
        configureTripSettings(trip);
    }
github brandonxiang / vueleaflet / src / components / Marker.vue View on Github external
deferredReady() {
            L.Icon.Default.imagePath = "../../node_modules/leaflet/dist/images/";
            var options = {
                opacity: this.opacity,
                title: this.title
            }
            this.$marker = L.marker(this.position, options).addTo(this.$map);
        },
        events: {
github TNRIS / flood / src / components / Map.jsx View on Github external
.on('locationfound', (e) =&gt; {
          if (this.geolocateCircle) {
            this.map.removeLayer(this.geolocateCircle)
          }
          if (this.geolocateIcon) {
            this.map.removeLayer(this.geolocateIcon)
          }

          if (this.map._locateOptions &amp;&amp; !this.map._locateOptions.watch) {
            this.geolocateIcon = L.marker(e.latlng, {
              icon: defaultMarker
            })
          }
          else {
            this.geolocateIcon = L.marker(e.latlng, {
              icon: watchLocationMarker
            })
          }

          this.geolocateIcon.bindPopup(
            `<h6>Approximate Location</h6>` +
            `<p>Latitude: ${e.latitude.toPrecision(7)}</p>` +
            `<p>Longitude: ${e.longitude.toPrecision(7)}</p>` +
            `<p>Accuracy: ${e.accuracy.toLocaleString({useGrouping: true})} meters</p>`,
            {
              className: 'geolocation-popup',
              closeButton: false
            }
          )

          this.geolocateIcon.on('contextmenu', () =&gt; {