How to use the react-leaflet.TileLayer 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 dimroc / urbanevents / cityservice-ui / app / scripts / components / MappedEvents.js View on Github external
'use strict';

var React = require('react');
var Leaflet = require('react-leaflet');
var EventStore = require('../stores/EventStore');
var CityStore = require('../stores/CityStore');

var Map = Leaflet.Map,
  TileLayer = Leaflet.TileLayer,
  Circle = Leaflet.Circle,
  Polygon = Leaflet.Polygon;

var latLongList = function(bounds) {
  // Bounds come in as long, lat, since long is X
  var twoCorners = bounds.map(function(bound) {
    return bound.slice(0).reverse();
  });

  var corners = [];
  corners.push(twoCorners[0]);
  corners.push([twoCorners[1][0], twoCorners[0][1]]);
  corners.push(twoCorners[1]);
  corners.push([twoCorners[0][0], twoCorners[1][1]]);
  return corners;
}
github appbaseio / reactivesearch / packages / maps / src / components / result / ReactiveOpenStreetMap.js View on Github external
componentDidMount() {
		/* eslint-disable */
		OpenStreetMap = require('react-leaflet').Map;
		OpenStreetLayer = require('react-leaflet').TileLayer;
		OpenStreetMaker = require('react-leaflet').Marker;
		OpenStreetPopup = require('react-leaflet').Popup;
		Icon = require('leaflet').Icon;
		DivIcon = require('leaflet').DivIcon;
		this.forceUpdate();
	}
github opentripplanner / otp-react-redux / build / components / map / base-map.js View on Github external
baseLayers && baseLayers.map(function (l, i) {
            return _react2.default.createElement(
              _reactLeaflet.LayersControl.BaseLayer,
              {
                name: l.name,
                checked: i === 0,
                key: i },
              _react2.default.createElement(_reactLeaflet.TileLayer, {
                url: l.url,
                attribution: l.attribution,
                maxZoom: l.maxZoom,
                detectRetina: true })
            );
          }),
          /* user-controlled overlay layers */
github opentripplanner / otp-react-redux / build / components / map / base-layers.js View on Github external
return _react.default.createElement(_reactLeaflet.LayersControl, null, baseLayers && baseLayers.map(function (l, i) {
        return _react.default.createElement(BaseLayer, {
          name: l.name,
          checked: i === 0,
          key: i
        }, _react.default.createElement(_reactLeaflet.TileLayer, _extends({}, l, {
          detectRetina: true
        })));
      }), overlays && overlays.map(function (l, i) {
        return _react.default.createElement(Overlay, {
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 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: []
    }
    this.getWKB = this.getWKB.bind(this)
    this.getShapeIDs = this.getShapeIDs.bind(this)
github opentripplanner / otp-react-redux / build / components / map / tile-overlay.js View on Github external
value: function render() {
      return this.props.tileUrl ? _react.default.createElement(_reactLeaflet.TileLayer, {
        url: this.props.tileUrl
      }) : null;
    }
  }]);
github Charmatzis / react-leaflet-bing / lib / Bing.js View on Github external
key: 'componentWillMount',
    value: function componentWillMount() {
      _get(BingLayer.prototype.__proto__ || Object.getPrototypeOf(BingLayer.prototype), 'componentWillMount', this).call(this);

      var _props = this.props,
          _map = _props.map,
          _lc = _props.layerContainer,
          bingkey = _props.bingkey,
          props = _objectWithoutProperties(_props, ['map', 'layerContainer', 'bingkey']);

      this.leafletElement = L.bingLayer(bingkey, props);
    }
  }]);

  return BingLayer;
}(_reactLeaflet.TileLayer);

BingLayer.propTypes = {
  bingkey: _propTypes2.default.string.isRequired
};
exports.default = BingLayer;
github opentripplanner / otp-react-redux / build / components / map / base-layers.js View on Github external
}), overlays && overlays.map(function (l, i) {
        return _react.default.createElement(Overlay, {
          name: l.name,
          key: i
        }, _react.default.createElement(_reactLeaflet.TileLayer, _extends({}, l, {
          detectRetina: true
        })));
      }));
    }
github hackoregon / component-library / lib / LeafletMap / LeafletMap.js View on Github external
var LeafletMap = function LeafletMap(_ref) {
  var width = _ref.width,
      height = _ref.height,
      children = _ref.children,
      mapProps = _objectWithoutProperties(_ref, ['width', 'height', 'children']);

  return _react2.default.createElement(
    'div',
    null,
    _isClient2.default && _react2.default.createElement(
      _reactLeaflet.Map,
      _extends({}, mapProps, { style: { width: width, height: height } }),
      _react2.default.createElement(_reactLeaflet.TileLayer, {
        url: mapProps.url,
        attribution: mapProps.attribution
      }),
      children
    )
  );
};