Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html lang="en">
- <head>
- <link rel="stylesheet" href="ol.css" type="text/css">
- <script src="ol.js" type="text/javascript"></script>
- <title>Latihan 8</title>
- </head>
- <body>
- <h2>My Map</h2>
- Background :
- <select id="pilih" onchange="pilih_bg(this.value)">
- <option value="osm">OpenStreet Map</option>
- <option value="bing_aerial">Bing Aerial</option>
- <option value="bing_road">Bing Road</option>
- <option value="bing_label">Bing AerialWithLabel</option>
- <option value="bing_kec">Kecamatan</option>
- </select>
- <input type="checkbox" id="sma" onclick="cek_sma()">SMA
- <input type="checkbox" id="genangan" onclick="cek_gen()">Genangan
- <input type="checkbox" id="kecamatan" onclick="cek_kec()">Kecamatan
- <div id="map" class="map"></div>
- <script type="text/javascript">
- function cek_kec(){
- var ceksma = document.getElementById("sma");
- var cekgen = document.getElementById("genangan");
- var cekkec = document.getElementById("kecamatan");
- if (cekkec.checked == true){
- //bing_sma.setVisible(false)
- osm.setVisible(true);
- bing_kec.setVisible(true);
- bing_label.setVisible(false);
- bing_road.setVisible(false);
- bing_aerial.setVisible(false);
- //bing_gen.setVisible(false);
- }
- else{
- //bing_sma.setVisible(false)
- osm.setVisible(true);
- bing_kec.setVisible(false);
- bing_label.setVisible(false);
- bing_road.setVisible(false);
- bing_aerial.setVisible(false);
- //bing_gen.setVisible(false);
- }
- }
- function cek_sma(){
- var ceksma = document.getElementById("sma");
- var cekgen = document.getElementById("genangan");
- if (ceksma.checked == true){
- bing_sma.setVisible(true)
- osm.setVisible(true);
- //bing_kec.setVisible(false);
- bing_label.setVisible(false);
- bing_road.setVisible(false);
- bing_aerial.setVisible(false);
- //bing_gen.setVisible(false);
- }
- else{
- bing_sma.setVisible(false)
- osm.setVisible(true);
- //bing_kec.setVisible(false);
- bing_label.setVisible(false);
- bing_road.setVisible(false);
- bing_aerial.setVisible(false);
- //bing_gen.setVisible(false);
- }
- }
- function cek_gen(){
- var ceksma = document.getElementById("sma");
- var cekgen = document.getElementById("genangan");
- if (cekgen.checked == true){
- //bing_sma.setVisible(false)
- osm.setVisible(true);
- //bing_kec.setVisible(false);
- bing_label.setVisible(false);
- bing_road.setVisible(false);
- bing_aerial.setVisible(false);
- bing_gen.setVisible(true);
- }
- else {
- //bing_sma.setVisible(false)
- osm.setVisible(true);
- //bing_kec.setVisible(false);
- bing_label.setVisible(false);
- bing_road.setVisible(false);
- bing_aerial.setVisible(false);
- bing_gen.setVisible(false);
- }
- }
- function pilih_bg(pilih)
- {
- if(pilih=='osm')
- {
- osm.setVisible(true);
- bing_aerial.setVisible(false);
- bing_label.setVisible(false);
- bing_road.setVisible(false);
- bing_kec.setVisible(false);
- }
- if(pilih=='bing_aerial')
- {
- osm.setVisible(false);
- bing_aerial.setVisible(true);
- bing_label.setVisible(false);
- bing_road.setVisible(false);
- bing_kec.setVisible(false);
- }
- if(pilih=='bing_road')
- {
- osm.setVisible(false);
- bing_road.setVisible(true);
- bing_label.setVisible(false);
- bing_aerial.setVisible(false);
- bing_kec.setVisible(false);
- }
- if(pilih=='bing_label')
- {
- osm.setVisible(false);
- bing_label.setVisible(true);
- bing_aerial.setVisible(false);
- bing_road.setVisible(false);
- bing_kec.setVisible(false);
- }
- if(pilih=='bing_kec')
- {
- osm.setVisible(true);
- bing_kec.setVisible(true);
- bing_label.setVisible(false);
- bing_road.setVisible(false);
- bing_aerial.setVisible(false);
- }
- }
- var sourceBingMaps = new ol.source.BingMaps({
- key: 'AjQ2yJ1-i-j_WMmtyTrjaZz-3WdMb2Leh_mxe9-YBNKk_mz1cjRC7-8ILM7WUVEu',
- imagerySet: 'Aerial',
- });
- var sourceWithLabels = new ol.source.BingMaps({
- key: 'AjQ2yJ1-i-j_WMmtyTrjaZz-3WdMb2Leh_mxe9-YBNKk_mz1cjRC7-8ILM7WUVEu',
- imagerySet: 'AerialWithLabels',
- });
- var sourceRoad = new ol.source.BingMaps({
- key: 'AjQ2yJ1-i-j_WMmtyTrjaZz-3WdMb2Leh_mxe9-YBNKk_mz1cjRC7-8ILM7WUVEu',
- imagerySet: 'Road',
- });
- var bing_kec = new ol.layer.Vector({
- source: new ol.source.Vector({
- format: new ol.format.GeoJSON({
- defaultDataProjection: 'EPSG:4326'
- }),
- url: 'kecamatan.geojson'
- }),
- visible:false,
- });
- var bing_sma = new ol.layer.Vector({
- source: new ol.source.Vector({
- format: new ol.format.GeoJSON({
- defaultDataProjection: 'EPSG:4326'
- }),
- url: 'sma.geojson'
- }),
- visible:false,
- });
- var bing_gen = new ol.layer.Vector({
- source: new ol.source.Vector({
- format: new ol.format.GeoJSON({
- defaultDataProjection: 'EPSG:4326'
- }),
- url: 'genangan.geojson'
- }),
- visible:false,
- });
- var bing_label = new ol.layer.Tile({
- preload: Infinity,
- source: sourceWithLabels,
- visible: false,
- });
- var bing_road = new ol.layer.Tile({
- preload: Infinity,
- source: sourceRoad,
- visible: false,
- });
- var bing_aerial = new ol.layer.Tile({
- preload: Infinity,
- source: sourceBingMaps,
- visible: false,
- });
- var osm = new ol.layer.Tile({
- source: new ol.source.OSM(),
- visible: true,
- });
- var map = new ol.Map({
- target: 'map',
- layers: [
- osm,
- bing_kec,
- bing_sma,
- bing_gen,
- bing_label,
- bing_road,
- bing_aerial
- ],
- controls: [
- //Define the default controls
- new ol.control.Zoom(),
- new ol.control.Rotate(),
- new ol.control.Attribution(),
- //Define some new controls
- new ol.control.ZoomSlider(),
- new ol.control.MousePosition(),
- new ol.control.ScaleLine(),
- new ol.control.OverviewMap()
- ],
- view: new ol.View({
- center: ol.proj.fromLonLat([112.7311017,-7.2670279]),
- zoom: 13.06
- })
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement