Skip to content

Commit b41bb56

Browse files
answerquestanswerquest
committed
print
1 parent 3cefc7f commit b41bb56

File tree

4 files changed

+378
-28
lines changed

4 files changed

+378
-28
lines changed

‎draw.html

+32-28
Original file line numberDiff line numberDiff line change
@@ -57,37 +57,41 @@
5757
<p><textarea id="dump" rows="20" cols="100"></textarea>
5858

5959
<script>
60-
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
61-
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
62-
osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
63-
map = new L.Map('map', { center: new L.LatLng(51.505, -0.04), zoom: 13 }),
64-
drawnItems = L.featureGroup().addTo(map);
65-
L.control.layers({
66-
'osm': osm.addTo(map),
67-
"google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
68-
attribution: 'google'
69-
})
70-
}, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
71-
map.addControl(new L.Control.Draw({
72-
edit: {
73-
featureGroup: drawnItems,
74-
poly: {
75-
allowIntersection: false
76-
}
77-
},
78-
draw: {
79-
polygon: {
80-
allowIntersection: false,
81-
showArea: true
82-
}
60+
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
61+
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
62+
osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
63+
map = new L.Map('map', { center: [22,78], zoom: 6 }),
64+
drawnItems = L.featureGroup().addTo(map);
65+
L.control.layers({
66+
'osm': osm.addTo(map),
67+
"google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
68+
attribution: 'google'
69+
})
70+
}, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
71+
map.addControl(new L.Control.Draw({
72+
edit: {
73+
featureGroup: drawnItems,
74+
poly: {
75+
allowIntersection: false
8376
}
84-
}));
77+
},
78+
draw: {
79+
polygon: {
80+
allowIntersection: false,
81+
showArea: true
82+
}
83+
}
84+
}));
85+
86+
map.on(L.Draw.Event.CREATED, function (event) {
87+
var layer = event.layer;
88+
89+
drawnItems.addLayer(layer);
90+
});
8591

86-
map.on(L.Draw.Event.CREATED, function (event) {
87-
var layer = event.layer;
92+
arr1 = [[22,78], [22,79], [23,79]];
8893

89-
drawnItems.addLayer(layer);
90-
});
94+
var l1 = L.polyline(arr1).addTo(drawnItems);
9195

9296
function exportDraw(){
9397
var shape = drawnItems.toGeoJSON()

‎js/India_Outline_Map.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/print.js

+174
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
// print.js
2+
// adapted from https://github.com/WRI-Cities/payanam/blob/master/js/print.js
3+
4+
// GLOBAL CONSTANTS, VARIABLES
5+
const start_location = [18.5175,73.8597];
6+
const start_zoom = 15;
7+
const max_zoom = 21;
8+
var shapeLayer = L.geoJson(null);
9+
10+
11+
// ######################################
12+
// LEAFLET MAP
13+
14+
// not using Leaflet-providers plugin as it's not supporting maxNativeZoom, using original urls from https://leaflet-extras.github.io/leaflet-providers/preview/
15+
var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
16+
maxZoom: 21, maxNativeZoom: 19, subdomains: 'abc',
17+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
18+
});
19+
20+
var esriWorld = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
21+
maxZoom: 21, maxNativeZoom: 19,
22+
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
23+
});
24+
25+
var CartoDB_Positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
26+
subdomains: 'abcd', maxZoom: 21, maxNativeZoom: 20,
27+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
28+
});
29+
30+
var CartoDB_DarkMatter = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
31+
subdomains: 'abcd', maxZoom: 21, maxNativeZoom: 20,
32+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
33+
});
34+
35+
// var gStreets = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', { maxZoom: 20, subdomains: ['mt0', 'mt1', 'mt2', 'mt3'] });
36+
// var gHybrid = L.tileLayer('https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', { maxZoom: 20, subdomains: ['mt0', 'mt1', 'mt2', 'mt3'] });
37+
38+
var baseLayers = {
39+
"OpenStreetMap.org": OSM,
40+
"CartoDB Light": CartoDB_Positron,
41+
"CartoDB Dark": CartoDB_DarkMatter,
42+
"ESRI Satellite": esriWorld,
43+
// "gStreets": gStreets,
44+
// "gHybrid": gHybrid
45+
};
46+
47+
var map = L.map('map', {
48+
center: start_location,
49+
zoom: start_zoom,
50+
layers: [OSM],
51+
maxZoom: max_zoom,
52+
});
53+
54+
// Load India int'l boundary as per shapefile shared on https://surveyofindia.gov.in/pages/outline-maps-of-india
55+
L.geoJSON(india_outline, {
56+
style: function (feature) {
57+
return {
58+
color: "black",
59+
fillOpacity: 0,
60+
weight: 3,
61+
opacity: 1
62+
};
63+
},
64+
interactive: false
65+
}).addTo(map);
66+
67+
$('.leaflet-container').css('cursor', 'crosshair'); // from https://stackoverflow.com/a/28724847/4355695 Changing mouse cursor to crosshairs
68+
69+
L.control.scale({ metric: true, imperial: false }).addTo(map);
70+
var myRenderer = L.canvas({ padding: 0.5 });
71+
72+
var overlays = {
73+
"shape": shapeLayer,
74+
};
75+
var layerControl = L.control.layers(baseLayers, overlays, { collapsed: true, autoZIndex: false }).addTo(map);
76+
shapeLayer.addTo(map);
77+
78+
function tiles_loading() {
79+
$('#tileStatus').html("Tiles loading, pls wait..");
80+
}
81+
function tiles_loaded() {
82+
$('#tileStatus').html("Ok to print.")
83+
}
84+
85+
OSM.on('loading', tiles_loading);
86+
OSM.on('load', tiles_loaded);
87+
88+
map.on('resize', function (event) {
89+
console.log("map resized");
90+
});
91+
92+
map.on('baselayerchange', function (event) {
93+
$('#tileStatus').html("Layer changed, tiles loading, pls wait..");
94+
95+
// Track tiles loading, loaded status from https://stackoverflow.com/a/27379032/4355695
96+
event.layer.on('loading', tiles_loading);
97+
event.layer.on('load', tiles_loaded);
98+
});
99+
100+
var bfl_options = {
101+
position: 'topleft', // Leaflet control position
102+
fileSizeLimit: 102400, // File size limit in kb (default: 1024 kb)
103+
style: () => {}, // Overwrite the default BFL GeoJSON style function
104+
onEachFeature: () => {}, // Overwrite the default BFL GeoJSON onEachFeature function
105+
layer: shapeLayer, // If you want a custom layer to be used (must be a GeoJSON class inheritance)
106+
// Restrict accepted file formats (default: .gpx, .kml, .kmz, .geojson, .json, .csv, .topojson, .wkt, .shp, .shx, .prj, .dbf, .zip)
107+
formats:['.geojson', '.kml', '.gpx'],
108+
109+
text: { // If you need translate
110+
title: "Upload a shape by clicking here, or drag-drop a file onto this map", // Plugin Button Text
111+
},
112+
}
113+
L.Control.betterFileLayer(bfl_options).addTo(map);
114+
115+
// ###############################################33
116+
function changeDimensions(reset=false) {
117+
118+
var w = parseInt($(`.width`).val());
119+
var h = parseInt($(`.height`).val());
120+
if(reset) {
121+
w = ORIG_W;
122+
h = ORIG_H;
123+
$(`.width`).val(w);
124+
$(`.height`).val(h);
125+
}
126+
$(`.page`).css('width',`${w}px`);
127+
$(`.page`).css('height',`${h}px`);
128+
129+
map.invalidateSize();
130+
// from https://stackoverflow.com/questions/24412325/resizing-a-leaflet-map-on-container-resize
131+
//Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically
132+
133+
}
134+
135+
function changeColor() {
136+
var color = $(`.color`).val();
137+
138+
}
139+
140+
function zoomFit(){
141+
map.fitBounds(shapeLayer.getBounds(), {padding:[5,5], maxZoom:17});
142+
}
143+
144+
// Range slider, from https://www.w3schools.com/howto/howto_js_rangeslider.asp
145+
document.getElementById("slider1").value = 60;
146+
document.getElementById("slider2").value = 60;
147+
148+
document.getElementById("slider1").oninput = function() {
149+
shapeLayer.eachLayer(r => {
150+
r.setStyle({ fillOpacity:this.value/100 });
151+
});
152+
}
153+
154+
document.getElementById("slider2").oninput = function() {
155+
shapeLayer.eachLayer(r => {
156+
r.setStyle({ opacity:this.value/100 });
157+
});
158+
}
159+
160+
document.getElementById("slider3").oninput = function() {
161+
162+
if (map.hasLayer(OSM)) {
163+
OSM.setOpacity(this.value/100);
164+
}
165+
else if (map.hasLayer(esriWorld)) {
166+
esriWorld.setOpacity(this.value/100);
167+
}
168+
else if (map.hasLayer(CartoDB_Positron)) {
169+
CartoDB_Positron.setOpacity(this.value/100);
170+
}
171+
else if (map.hasLayer(CartoDB_DarkMatter)) {
172+
CartoDB_DarkMatter.setOpacity(this.value/100);
173+
}
174+
}

0 commit comments

Comments
 (0)