How to use the react-leaflet.Marker function in react-leaflet

To help you get started, we’ve selected a few react-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 opentripplanner / otp-react-redux / build / components / map / base-map.js View on Github external
}
      if (bounds) {
        mapProps.bounds = bounds
      } else if (position && zoom) {
        mapProps.center = position
        mapProps.zoom = zoom
      } else {
        console.error('no map position/bounds provided!', {position, zoom, bounds})
      } */

      // Compute the elevation point marker, if activeLeg
      var elevationPointMarker = null;
      if (diagramLeg && elevationPoint) {
        var pos = (0, _itinerary.legLocationAtDistance)(diagramLeg, elevationPoint);
        if (pos) {
          elevationPointMarker = _react2.default.createElement(_reactLeaflet.Marker, { position: pos });
        }
      }

      return _react2.default.createElement(
        _reactLeaflet.Map,
        {
          ref: 'map',
          className: 'map',
          center: center,
          zoom: config.map.initZoom || 13,
          onOverlayAdd: this._onOverlayAdd,
          onOverlayRemove: this._onOverlayRemove
          /* Note: Map-click is handled via single-click plugin, set up in componentDidMount() */
        },
        _react2.default.createElement(
          _reactLeaflet.LayersControl,
github PaulLeCam / react-leaflet / example / build / app.js View on Github external
value: function render() {
      var position = [this.state.lat, this.state.lng];
      return _react2['default'].createElement(
        _reactLeaflet.Map,
        { center: position, zoom: this.state.zoom },
        _react2['default'].createElement(_reactLeaflet.TileLayer, {
          attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
          url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        }),
        _react2['default'].createElement(
          _reactLeaflet.Marker,
          { position: position },
          _react2['default'].createElement(
            _reactLeaflet.Popup,
            null,
            _react2['default'].createElement(
              'span',
              null,
              'A pretty CSS3 popup. ',
              _react2['default'].createElement('br', null),
              ' Easily customizable.'
            )
          )
        )
      );
    }
  }]);
github ishaan6395 / react-leaflet-enhanced-marker / lib / Markers.js View on Github external
value: function render() {
      var _this2 = this;

      var iconProps = this.props.icon && this.props.icon.props;
      var _props = this.props,
          highlight = _props.highlight,
          position = _props.position;
      var properties = this.state.properties;


      return _react2.default.createElement(_reactLeaflet.Marker, (0, _extends3.default)({
        style: {
          cursor: "pointer"
        }
      }, iconProps, properties, this.props, {
        ref: function ref(ele) {
          return _this2.markerRef = ele;
        },
        position: position,
        icon: this.getIcon(),
        onClick: function onClick(event) {
          iconProps && iconProps.onClick && iconProps.onClick();
          _this2.props && _this2.props.onClick && _this2.props.onClick(event);
          _this2.triggerProperty("onClick");
        },
        onMouseOver: function onMouseOver(event) {
          highlight && _this2.highlight();
github opentripplanner / otp-react-redux / build / components / map / car-rental-overlay.js View on Github external
stations.map(function (station) {
          var stationName = station.networks.join('/') + ' ' + station.id;
          return _react2.default.createElement(
            _reactLeaflet.Marker,
            {
              icon: carRentalNetworkIconLookup[station.networks] || carRentalNetworkIconLookup.default,
              key: station.id,
              position: [station.y, station.x]
            },
            _react2.default.createElement(
              _reactLeaflet.Popup,
              null,
              _react2.default.createElement(
                'div',
                { className: 'map-overlay-popup' },
                _react2.default.createElement(
                  'div',
                  { className: 'popup-title' },
                  stationName
                ),
github opentripplanner / otp-react-redux / build / components / map / endpoint.js View on Github external
className: "fa-stack-1x fa fa-circle",
        style: _objectSpread({
          color: '#fff'
        }, bgStyle, {
          fontSize: 12,
          marginTop: -4
        })
      })), _react.default.createElement(_locationIcon.default, {
        type: type,
        className: "fa-stack-1x",
        style: fgStyle
      })));

      var otherType = type === 'from' ? 'to' : 'from';
      var icon = isWork ? 'briefcase' : isHome ? 'home' : 'map-marker';
      return _react.default.createElement(_reactLeaflet.Marker, {
        draggable: true,
        icon: (0, _leaflet.divIcon)({
          html: iconHtml,
          className: ''
        }),
        position: position,
        onDragEnd: this._onDragEnd
      }, showPopup && _react.default.createElement(_reactLeaflet.Popup, null, _react.default.createElement("div", null, _react.default.createElement("strong", null, _react.default.createElement(_icon.default, {
        type: icon
      }), " ", location.name), _react.default.createElement("div", null, _react.default.createElement(_reactBootstrap.Button, {
        bsStyle: "link",
        bsSize: "small",
        disabled: isWork,
        style: {
          padding: 0
        },
github dymajo / waka / js / views / line.jsx View on Github external
import React from 'react'
import { Link, browserHistory } from 'react-router'
import { StationStore } from '../stores/stationStore.js'
import { UiStore } from '../stores/uiStore.js'

let leaflet = require('react-leaflet')
let wkx = require('wkx')
let Buffer = require('buffer').Buffer
let Map = leaflet.Map
let Marker = leaflet.Marker
let Popup = leaflet.Popup
let TileLayer = leaflet.TileLayer
let ZoomControl = leaflet.ZoomControl
let GeoJson = leaflet.GeoJSON
let Icon = require('leaflet').icon
let Circle = leaflet.Circle
let CircleMarker = leaflet.CircleMarker

class Line extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      line: undefined,
      route_id: undefined,
      route_list: []
    }
github tumerorkun / react-leaflet-search / lib / ExtendedMarker.js View on Github external
ExtendedMarker.prototype.componentDidMount = function componentDidMount() {
        var _Marker$prototype$com,
            _this2 = this;

        for (var _len = arguments.length, a = Array(_len), _key = 0; _key &lt; _len; _key++) {
            a[_key] = arguments[_key];
        }

        (_Marker$prototype$com = _Marker.prototype.componentDidMount).call.apply(_Marker$prototype$com, [this].concat(a));
        setTimeout(function () {
            _this2.leafletElement.openPopup();
        }, 1);
    };

    return ExtendedMarker;
}(_reactLeaflet.Marker);

exports.default = ExtendedMarker;
github tumerorkun / react-leaflet-search / lib / React-Leaflet-Search.js View on Github external
ReactLeafletSearch.prototype.render = function render() {
        var _this4 = this;

        this.markerRef = false;
        var _ = this;
        return this.state.search && this.props.showMarker ? _react2.default.createElement(
            _reactLeaflet.Marker,
            {
                ref: function ref(_ref) {
                    return _this4.markerRef = _ref;
                },
                icon: this.props.markerIcon || this.markerIcon,
                key: 'marker-search-' + this.state.search.toString(),
                position: [].concat(this.state.search) },
            this.props.showPopup && (this.props.popUp ? this.props.popUp(this.SearchInfo) : this.defaultPopUp())
        ) : null;
    };
github opentripplanner / otp-react-redux / build / components / map / itinerary-steps.js View on Github external
return _react.default.createElement("div", null, steps.map(function (step, index) {
        if (step.relativeDirection === 'DEPART') {
          return null;
        }

        var active = step.legIndex === activeLeg &amp;&amp; step.stepIndex === activeStep;
        var icon = (0, _leaflet.divIcon)({
          html: "<i style="\&quot;&quot;.concat(active" class="\&quot;fa"></i>"),
          className: ''
        });
        return _react.default.createElement(_reactLeaflet.Marker, {
          icon: icon,
          title: (0, _itinerary.getStepInstructions)(step),
          position: [step.lat, step.lon],
          key: index
        });
      }));
    }
github dymajo / waka / js / views / vehicle_loc.jsx View on Github external
import LocateIcon from '../../dist/icons/locate.svg'
import TrainIcon from '../../dist/icons/train.svg'
import FerryIcon from '../../dist/icons/ferry.svg'
import BusIcon from '../../dist/icons/bus.svg'

const iconMap = {
  train: ,
  ferry: ,
  bus: ,
}

import RotatedMarker from './rotated-marker.jsx'
let leaflet = require('react-leaflet')
let Map = leaflet.Map
let Marker = leaflet.Marker
let Popup = leaflet.Popup
let TileLayer = leaflet.TileLayer
let ZoomControl = leaflet.ZoomControl
let GeoJson = leaflet.GeoJSON
let Icon = require('leaflet').icon
let Circle = leaflet.Circle
let CircleMarker = leaflet.CircleMarker
let CurrentStop = window.location.pathname.slice(3, 7)
let geoID = undefined
let liveRefresh = undefined

const hiddenIcon = Icon({
  iconUrl: '/icons/normal/bus-fill.svg',
  iconSize: [48, 48],
  className: 'hiddenIcon',
})