JSFiddle - React, Tailwind, and code Playground

by aidankirrane

HTML

<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css">
<div id="map"></div>
<button onclick="moveMarker()">Move marker</button>

CSS

.leaflet-marker-pane img, .leaflet-shadow-pane img {
   -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

html, body, #map {
    height: 100%;
    width: 100%;
}
button {
    position: absolute;
    top: 0;
    left: 200px;
}

JavaScript

var cloudmadeUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
    cloudmade = new L.TileLayer(cloudmadeUrl, {
        maxZoom: 18,
        attribution: cloudmadeAttribution
    }),
    latlng = new L.LatLng(50.5, 30.51);

var map = new L.Map('map', {
    center: latlng,
    zoom: 15,
    layers: [cloudmade]
});

var marker = new L.Marker(latlng);
map.addLayer(marker);

window.moveMarker = function() {
    marker.setLatLng(new L.LatLng(50.495, 30.51));
}