bshiro/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Land-use map using Mapbox

  
## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Land Use Map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
    #menu {
        background: #fff;
        position: absolute;
        z-index: 1;
        top: 10px;
        right: 10px;
        border-radius: 3px;
        width: 120px;
        border: 1px solid rgba(0,0,0,0.4);
        font-family: 'Open Sans', sans-serif;
    }

    #menu a {
        font-size: 13px;
        color: #404040;
        display: block;
        margin: 0;
        padding: 0;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.25);
        text-align: center;
    }

    #menu a:last-child {
        border: none;
    }

    #menu a:hover {
        background-color: #f8f8f8;
        color: #404040;
    }

    #menu a.active {
        background-color: #3887be;
        color: #ffffff;
    }

    #menu a.active:hover {
        background: #3074a4;
    }
</style>

<nav id="menu"></nav>
<div id="map"></div>

<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiYnNoaXJvIiwiYSI6ImNpbHZxbmRrNDAxbW10eWtydjh6bGZyeXQifQ.Qw9BoP7S9dlGj9DY4khofA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v8',
        zoom: 10,
        //center: [-71.97722138410576, -13.517379300798098]
        center: [-88,42.35]
    });

    map.on('style.load', function () {
        map.addSource('sampleSource', {
            type: 'vector',
            url: 'mapbox://bshiro.9uegkinh'
        });

        map.addLayer({
            "id": "publicsector",
            "type": "fill",
            "source": "sampleSource",
            "source-layer": "sample_file",
            "filter": ["==", "Type", "Public Sector"],
            "layout": {
                visibility: 'visible',
            },
            "paint": {
                'fill-color': 'rgba(61,153,80,0.55)'
            }
        });

        map.addLayer({
            "id": "privatesector",
            "type": "fill",
            "source": "sampleSource",
            "source-layer": "sample_file",
            "filter": ["==", "Type", "Private Sector"],
            "layout": {
                visibility: 'visible',
            },
            "paint": {
                'fill-color': 'rgba(61,0,80,0.55)'
            }
        });

    });

</script>

</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Land Use Map</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

	<style>
	#menu {
	background: #fff;
	position: absolute;
	z-index: 1;
	top: 10px;
	right: 10px;
	border-radius: 3px;
	width: 120px;
	border: 1px solid rgba(0,0,0,0.4);
	font-family: 'Open Sans', sans-serif;
	}

	#menu a {
	font-size: 13px;
	color: #404040;
	display: block;
	margin: 0;
	padding: 0;
	padding: 10px;
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	text-align: center;
	}

	#menu a:last-child {
	border: none;
	}

	#menu a:hover {
	background-color: #f8f8f8;
	color: #404040;
	}

	#menu a.active {
	background-color: #3887be;
	color: #ffffff;
	}

	#menu a.active:hover {
	background: #3074a4;
	}
	</style>

	<nav id="menu"></nav>
	<div id="map"></div>

	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoiYnNoaXJvIiwiYSI6ImNpbHZxbmRrNDAxbW10eWtydjh6bGZyeXQifQ.Qw9BoP7S9dlGj9DY4khofA';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v8',
	zoom: 10,
	//center: [-71.97722138410576, -13.517379300798098]
	center: [-88,42.35]
	});

	map.on('style.load', function () {
	map.addSource('sampleSource', {
	type: 'vector',
	url: 'mapbox://bshiro.9uegkinh'
	});

	map.addLayer({
	"id": "publicsector",
	"type": "fill",
	"source": "sampleSource",
	"source-layer": "sample_file",
	"filter": ["==", "Type", "Public Sector"],
	"layout": {
	visibility: 'visible',
	},
	"paint": {
	'fill-color': 'rgba(61,153,80,0.55)'
	}
	});

	map.addLayer({
	"id": "privatesector",
	"type": "fill",
	"source": "sampleSource",
	"source-layer": "sample_file",
	"filter": ["==", "Type", "Private Sector"],
	"layout": {
	visibility: 'visible',
	},
	"paint": {
	'fill-color': 'rgba(61,0,80,0.55)'
	}
	});

	});

	</script>

	</body>
	</html>