"use strict";

var React = require('react');

var LeafletMap = require('react-leaflet').Map;
var Marker = require('react-leaflet').Marker;
var Popup = require('react-leaflet').Popup;
var TileLayer = require('react-leaflet').TileLayer;

var TrainsMap = React.createClass({
  getInitialState: function() {
    return {
      lat: 51.505,
      lng: -0.09,
      zoom: 13
    };
  },

  render: function() {
    var position = [this.state.lat, this.state.lng];
    return <LeafletMap center={position} zoom={this.state.zoom}>
      <TileLayer
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <Marker position={position}>
        <Popup>
          <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
        </Popup>
      </Marker>
    </LeafletMap>;
 }

});

module.exports = TrainsMap;

@@ -360,17 +360,17 @@
  zoom: 1
-3
+2
 %0A    %7D;%0A
@@ -557,24 +557,29 @@
 p://
-%7Bs%7D.
 tile.
-osm.org
+stamen.com/toner
 /%7Bz%7D
@@ -613,16 +613,25 @@
 bution='
+Map data 
 &copy; %3C
@@ -650,24 +650,24 @@
 ://o
-sm.org/copyright
+penstreetmap.org
 %22%3EOp
@@ -698,172 +698,143 @@
 tors
-'%0A      /%3E%0A      %3CMarker position=%7Bposition%7D%3E%0A        %3CPopup%3E%0A          %3Cspan%3EA pretty CSS3 popup. %3Cbr/%3E Easily customizable.%3C/span%3E%0A        %3C/Popup%3E%0A      %3C/Marker
+, %3Ca href=%22http://creativecommons.org/licenses/by-sa/2.0/%22%3ECC-BY-SA%3C/a%3E, Imagery %C2%A9 %3Ca href=%22http://maps.stamen.com%22%3EStamen%3C/a%3E'%0A      /
 %3E%0A  

Use stamen tiles and set middle point.