JSFiddle - React, Tailwind, and code Playground

by spydmobile

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<div id="map"></div>

CSS

#map {
  height: 400px;
}

JavaScript

// center of the map
var center = [60, -111];
var id='outdoors-v9';
const FrancoAccessToken = 'pk.eyJ1Ijoic3BhcmNzYWRtaW4iLCJhIjoiOUtXRXZSdyJ9.jls4Z44CNsgNQ84KYcGaqQ';
const hssAccessToken = 'pk.eyJ1IjoidHJlZHBhdGgiLCJhIjoiY2tzeTVubHA2Mmd3aTJucG8xaDZpOGo5OCJ9.lhcnNTvcf9R9HHJB4SMWNg'
const accessToken = FrancoAccessToken
// Create the map
var map = L.map('map').setView(center, 6);

 L.tileLayer('https://api.mapbox.com/styles/v1/sparcsadmin/cj4ilw0aa44f32qmqu1zcgomo/tiles/256/{z}/{x}/{y}@2x?access_token=' + accessToken , {
  
       format: 'image/png',
  transparent: true,
 version: '1.1.1',
attribution: "mapbox.com"
})

 .addTo(map);  
/* 
 L.tileLayer(
    'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + accessToken, {
        tileSize: 512,
        zoomOffset: -1,
        attribution: '© <a href="https://www.mapbox.com/contribute/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map); */

/*  L.tileLayer('https://api.tiles.mapbox.com/v1/outdoors-v1/{z}/{x}/{y}?access_token=' + accessToken,  {
       format: 'image/png',
  transparent: true,
 version: '1.1.1',
 attribution: "mapbox.com"
 }).addTo(map);  */


https://api.mapbox.com/styles/v1/sparcsadmin/cj4ilw0aa44f32qmqu1zcgomo.html?title=view&access_token=pk.eyJ1Ijoic3BhcmNzYWRtaW4iLCJhIjoiOUtXRXZSdyJ9.jls4Z44CNsgNQ84KYcGaqQ&zoomwheel=true&fresh=true#9.6/60.0672/-111.643

mapbox://styles/sparcsadmin/cj4ilw0aa44f32qmqu1zcgomo

var gsUrl = "https://gs.staging.intellifirenwt.com/geoserver/intellifire/wms?"
// add a marker in the given location
L.marker(center).addTo(map);

var wmsLayer = L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    layers: 'TOPO-OSM-WMS'
}).addTo(map);

var gsLayer = L.tileLayer.wms(gsUrl, {
    layers: 'intellifire:weather_condition',
      format: 'image/png',
  transparent: true,
 version: '1.1.1',
 tiled:true
    
}).addTo(map);

/* var stationsLayer = L.tileLayer.wms(gsUrl, {
    layers:...