Alta Map Spartanburg

Developer
Size
4,679 Kb
Views
12,144

How do I make an alta map spartanburg?

Multiple kmz files on one google map.google documentation: https://developers.google.com/maps/documentation/javascript/examples/layer-kml-features. What is a alta map spartanburg? How do you make a alta map spartanburg? This script and codes were developed by Pollardld on 08 November 2022, Tuesday.

Alta Map Spartanburg Previews

Alta Map Spartanburg - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Alta Map Spartanburg</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="map-canvas"></div>
<div id="legend"> <ul> <li><input type="checkbox" id="existing-trails" checked> <label for="existing-trails">Existing Trails</label></li> <li><input type="checkbox" id="existing-bikeways" checked> <label for="existing-bikeways">Existing Bikeways</label></li> <li><input type="checkbox" id="proposed-trails" checked> <label for="proposed-trails">Proposed Trails</label></li> <li><input type="checkbox" id="proposed-bikeways" checked> <label for="proposed-bikeways">Proposed Bikeways</label></li> </ul>
</div>
<div class="colors"> <ul> Existing Trails <li><i></i> Paved Trail</li> <li><i></i> Natural Surface</li> <li><i></i> Neighborhood Greenway</li> <li><i></i> Blueway</li> Proposed Trails <li><i></i> Paved Trail</li> <li><i></i> Natural Surface</li> <li><i></i> Cultural Trail</li> <li><i></i> Blueway</li> Existing Bikeways <li><i></i> Signed Route</li> <li><i></i> Bike Lane or Sharrow</li> <li><i></i> 4' shoulder</li> Proposed Bikeways <li><i></i> Bike Route</li> <li><i></i> Bike Lane</li> <li><i></i> Paved Shoulder</li> <li><i></i> Shared Lane Marking</li> <li><i></i> Wide Outside Lane</li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script> <script src="js/index.js"></script>
</body>
</html>

Alta Map Spartanburg - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Fanwood+Text);
html, body, #map-canvas { font-family: 'Fanwood Text', serif; height: 100%; margin: 0px; padding: 0px;
}
.colors { background: #f2f2f2; box-size: border-box; color: #666; font-size: .75em; max-height: 60%; overflow: scroll; right: 0; padding: 1rem; position: absolute; top: 0;
}
.colors ul { list-style: none; margin: 0; padding: 0;
}
.colors ul li { margin-bottom: .25rem;
}
.colors ul li i { box-sizing: border-box; display: inline-block;
}
.colors ul li:nth-of-type(1) i { border: 2px solid #000; height: .875em; margin: .25rem .25rem 0 .75rem; width: .875em;
}
.colors ul li:nth-of-type(2) i { border: 2px solid #000; height: .875em; margin: .25rem .25rem 0 .75rem; width: .875em;
}
.colors ul li:nth-of-type(3) i { border: 2px solid #000; height: .875em; margin: .25rem .25rem 0 .75rem; width: .875em;
}
.colors ul li:nth-of-type(4) i { border: 2px solid #000; height: .875em; margin: .25rem .25rem 0 .75rem; width: .875em;
}
.colors ul li:nth-of-type(5) i { height: .75em; margin: 0 .25rem 0 .75rem; width: .75em;
}
.colors ul li:nth-of-type(6) i { height: .75em; margin: 0 .25rem 0 .75rem; width: .75em;
}
.colors ul li:nth-of-type(7) i { height: .75em; margin: 0 .25rem 0 .75rem; width: .75em;
}
.colors ul li:nth-of-type(8) i { height: .75em; margin: 0 .25rem 0 .75rem; width: .75em;
}
.colors ul li:nth-of-type(9) i { border: 2px solid #000; height: .875em; margin: .25rem .25rem 0 .75rem; width: .875em;
}
.colors ul li:nth-of-type(10) i { border: 2px solid #000; height: .875em; margin: .25rem .25rem 0 .75rem; width: .875em;
}
.colors ul li:nth-of-type(11) i { border: 2px solid #000; height: .875em; margin: .25rem .25rem 0 .75rem; width: .875em;
}
.colors ul li:nth-of-type(12) i { height: .75em; margin: 0 .25rem 0 .75rem; width: .75em;
}
.colors ul li:nth-of-type(13) i { height: .75em; margin: 0 .25rem 0 .75rem; width: .75em;
}
.colors ul li:nth-of-type(14) i { height: .75em; margin: 0 .25rem 0 .75rem; width: .75em;
}
.colors ul li:nth-of-type(15) i { height: .75em; margin: 0 .25rem 0 .75rem; width: .75em;
}
.colors ul li:nth-of-type(16) i { height: .75em; margin: 0 .25rem 0 .75rem; width: .75em;
}
.colors ul li:nth-of-type(1) i { background: #33a02c;
}
.colors ul li:nth-of-type(2) i { background: #b15928;
}
.colors ul li:nth-of-type(3) i { background: #6a3d9a;
}
.colors ul li:nth-of-type(4) i { background: #1f78b4;
}
.colors ul li:nth-of-type(5) i { background: #33a02c;
}
.colors ul li:nth-of-type(6) i { background: #b15928;
}
.colors ul li:nth-of-type(7) i { background: #6a3d9a;
}
.colors ul li:nth-of-type(8) i { background: #1f78b4;
}
.colors ul li:nth-of-type(9) i { background: yellow;
}
.colors ul li:nth-of-type(10) i { background: #e31a1c;
}
.colors ul li:nth-of-type(11) i { background: #ff7f00;
}
.colors ul li:nth-of-type(12) i { background: yellow;
}
.colors ul li:nth-of-type(13) i { background: #e31a1c;
}
.colors ul li:nth-of-type(14) i { background: #ff7f00;
}
.colors ul li:nth-of-type(15) i { background: #cd6699;
}
.colors ul li:nth-of-type(16) i { background: #fdbf6f;
}
#legend { background: rgba(255, 250, 242, 0.95); bottom: 0; box-size: border-box; color: #666; font-size: 1em; max-height: 40%; overflow: scroll; padding: 1rem 1.5rem; position: absolute; right: 0;
}
#legend ul { list-style: none; margin: 0; padding: 0;
}
#legend ul li { line-height: 1.5em; margin-bottom: .75em;
}
#legend ul li:last-of-type { margin-bottom: 0;
}
#legend ul li label { cursor: pointer;
}
#legend ul li input[type="checkbox"] { cursor: pointer; display: inline-block; height: 1em; margin-right: .5em; position: relative; top: 0; width: 1em;
}
#legend ul li input[type="checkbox"]:after { background: #fff; border: .1675em solid #8fdaaa; box-sizing: border-box; border-radius: 50%; color: #666; content: ''; height: 1.5em; left: -.25em; position: absolute; top: -.25em; width: 1.5em;
}
#legend ul li input[type="checkbox"]:before { background: #fff; box-sizing: border-box; border-radius: 50%; content: ''; height: .75em; left: .125em; position: absolute; top: .125em; width: .75em; z-index: 1; transition: .1s all ease;
}
#legend ul li input[type="checkbox"]:checked:before { background: #8fdaaa;
}
.gm-style-iw table tbody:first-child { visibility: hidden;
}
.gm-style-iw table tbody table tbody:first-child { visibility: visible;
}

Alta Map Spartanburg - Script Codes JS Codes

function initialize() { var spartanburg = new google.maps.LatLng(34.942,-81.922); var mapOptions = { zoom: 11, center: spartanburg } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Black background layers var exisitingTrailsBackground = new google.maps.KmlLayer({ url : 'http://diccfish.com/ExistingBackground_Trails.kmz', suppressInfoWindows : true, preserveViewport : true, zIndex : 0 }); var exisitingBikewaysBackground = new google.maps.KmlLayer({ url : 'http://diccfish.com/ExistingBackground_Bikeways.kmz', suppressInfoWindows : true, preserveViewport : true, zIndex : 0 }); // Existing Layers var existingTrailsLayer = new google.maps.KmlLayer({ url : 'http://diccfish.com/ExistingTrails_030714.kmz', preserveViewport : true, zIndex : 1 }); var existingBikewaysLayer = new google.maps.KmlLayer({ url : 'http://diccfish.com/ExistingBikeways_030714.kmz', preserveViewport : true, zIndex : 1 }); // Proposed Layers var proposedTrailsLayer = new google.maps.KmlLayer({ url : 'http://diccfish.com/ProposedTrails_031314_Dash.kmz', preserveViewport : true, zIndex : 2 }); var proposedBikewaysLayer = new google.maps.KmlLayer({ url : 'http://diccfish.com/ProposedBikeways_031314_Dash.kmz', preserveViewport : true, zIndex : 2 }); // Add all trails to map exisitingTrailsBackground.setMap(map); exisitingBikewaysBackground.setMap(map); existingTrailsLayer.setMap(map); existingBikewaysLayer.setMap(map); proposedTrailsLayer.setMap(map); proposedBikewaysLayer.setMap(map); // Legend Controls var existingTrailsCheckbox = document.getElementById( 'existing-trails' ), existingBikewaysCheckbox = document.getElementById( 'existing-bikeways' ), proposedTrailsCheckbox = document.getElementById( 'proposed-trails' ), proposedBikewaysCheckbox = document.getElementById( 'proposed-bikeways' ); jQuery( 'input[type="checkbox"]' ).on( 'click', function() { if ( existingTrailsCheckbox.checked ) { existingTrailsLayer.setMap(map); exisitingTrailsBackground.setMap(map); } else { existingTrailsLayer.setMap(null); exisitingTrailsBackground.setMap(null); } if ( existingBikewaysCheckbox.checked ) { existingBikewaysLayer.setMap(map); exisitingBikewaysBackground.setMap(map); } else { existingBikewaysLayer.setMap(null); exisitingBikewaysBackground.setMap(null); } if ( proposedTrailsCheckbox.checked ) { proposedTrailsLayer.setMap(map); } else { proposedTrailsLayer.setMap(null); } if ( proposedBikewaysCheckbox.checked ) { proposedBikewaysLayer.setMap(map); } else { proposedBikewaysLayer.setMap(null); } });
}
google.maps.event.addDomListener(window, 'load', initialize);
Alta Map Spartanburg - Script Codes
Alta Map Spartanburg - Script Codes
Home Page Home
Developer Pollardld
Username pollardld
Uploaded November 08, 2022
Rating 3.5
Size 4,679 Kb
Views 12,144
Do you need developer help for Alta Map Spartanburg?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pollardld (pollardld) Script Codes
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!