1jQuery(document).ready(function($) { 2 require([ 3 "esri/Map", 4 "esri/views/MapView", 5 "esri/Graphic", 6 "esri/layers/GraphicsLayer", 7 "esri/geometry/Polyline", 8 "esri/geometry/geometryEngine", 9 "esri/symbols/SimpleLineSymbol", 10 "esri/Color", 11 "esri/geometry/Point", 12 "esri/symbols/PictureMarkerSymbol", 13 "esri/layers/GeoJSONLayer", 14 "esri/core/reactiveUtils" 15 ], function (Map, MapView, Graphic, GraphicsLayer, Polyline, geometryEngine, SimpleLineSymbol, Color, Point, PictureMarkerSymbol, GeoJSONLayer, reactiveUtils) { 16 17 const url = jsonUrl; 18 19 // Define the renderer with desired colors 20 let renderer = { 21 type: "simple", 22 symbol: { 23 type: "simple-fill", 24 color: "#d5a256", 25 outline: { 26 color: [0, 0, 0, 0.1], 27 width: 1 28 } 29 } 30 }; 31 32 // Create the GeoJSON layer with the renderer 33 const geojsonLayer = new GeoJSONLayer({ 34 url: url, 35 renderer: renderer, 36 id: "stateLayer", 37 }); 38 39 // Define the default (inactive) and active marker symbols 40 const defaultMarkerSymbol = { 41 type: "picture-marker", 42 url: map_pin_svg, 43 width: "12px", 44 height: "12px" 45 }; 46 47 const activeMarkerSymbol = { 48 type: "picture-marker", 49 url: active_map_pin_svg, 50 width: "18px", 51 height: "18px" 52 }; 53 54 // Create the map with the GeoJSON layer 55 const map = new Map({ 56 layers: [geojsonLayer] 57 }); 58 59 // Create the MapView with docked popup at bottom-right 60 const view = new MapView({ 61 container: "viewDiv", 62 map: map, 63 center: [82.0882, 22.1458], 64 zoom: 4, 65 popup: { 66 dockEnabled: true, 67 dockOptions: { 68 position: "bottom-right", 69 breakpoint: false 70 } 71 }, 72 constraints: { 73 rotationEnabled: false, 74 keyboardNavigationEnabled: false, 75 snapToZoom: false, 76 zoom: 4, 77 panning: false 78 } 79 }); 80 81 view.ui.components = view.ui.components.filter(component => component !== "zoom"); 82 83 // Define the coordinates and popup data for your points 84 const pointData = [ 85 { 86 lat: 28.5831, 87 lon: 77.2344, 88 customPopupTemplate:{ 89 Name:'Delhi', 90 Html: delhi_html, 91 } 92 }, 93 { 94 lat: 22.5772, 95 lon: 88.3641, 96 customPopupTemplate:{ 97 Name:'Kolkata', 98 Html: kolkata_html, 99 } 100 }, 101 { 102 lat: 12.9820, 103 lon: 77.6055, 104 customPopupTemplate:{ 105 Name:'Bengaluru', 106 Html: bengaluru_html, 107 } 108 }, 109 { 110 lat: 23.2203, 111 lon: 72.6355, 112 customPopupTemplate:{ 113 Name:'Gandhinagar', 114 Html: gandhinagar_html, 115 } 116 }, 117 { 118 lat: 23.2731, 119 lon: 77.4051, 120 customPopupTemplate:{ 121 Name:'Bhopal', 122 Html: bhopal_html, 123 } 124 }, 125 { 126 lat: 28.9988, 127 lon: 77.0151, 128 customPopupTemplate:{ 129 Name:'Sonepat', 130 Html: sonepat_html, 131 } 132 }, 133 { 134 lat: 30.7341, 135 lon: 76.7834, 136 customPopupTemplate:{ 137 Name:'Chandigarh', 138 Html: chandigarh_html, 139 } 140 }, 141 { 142 lat: 24.8176, 143 lon: 93.9343, 144 customPopupTemplate:{ 145 Name:'Imphal', 146 Html: imphal_html, 147 } 148 }, 149 { 150 lat: 26.8583, 151 lon: 80.9356, 152 customPopupTemplate:{ 153 Name:'Lucknow', 154 Html: lucknow_html, 155 } 156 }, 157 { 158 lat: 26.1176, 159 lon: 91.7035, 160 customPopupTemplate:{ 161 Name:'Guwahati', 162 Html: guwahati_html, 163 } 164 }, 165 { 166 lat: 19.0891, 167 lon: 72.8824, 168 customPopupTemplate:{ 169 Name:'Mumbai', 170 Html: mumbai_html, 171 } 172 }, 173 { 174 lat: 30.3466, 175 lon: 76.3266, 176 customPopupTemplate:{ 177 Name:'Patiala', 178 Html: patiala_html, 179 } 180 }, 181 { 182 lat: 8.4996, 183 lon: 76.7594, 184 customPopupTemplate:{ 185 Name:'Thiruvananthapuram', 186 Html: thiruvananthapuram_html, 187 } 188 } 189 ]; 190 191 // Create an array to hold the point graphics 192 const pointGraphics = []; 193 194 pointData.forEach(data => { 195 const point = new Point({ 196 latitude: data.lat, 197 longitude: data.lon, 198 }); 199 200 const pointGraphic = new Graphic({ 201 geometry: point, 202 symbol: defaultMarkerSymbol, // Assign the default symbol 203 attributes: data.customPopupTemplate, 204 popupTemplate: { 205 title: null, 206 content: data.customPopupTemplate.Html, 207 } 208 }); 209 210 pointGraphics.push(pointGraphic); 211 }); 212 213 // Add the point graphics to the map view 214 view.graphics.addMany(pointGraphics); 215 216 // Variables to manage tooltip and active graphic 217 const tooltip = document.getElementById('map_tooltip'); 218 let hoveredGraphic = null; 219 let activeGraphic = null; 220
221 // Handle pointer-move events for tooltip and cursor changes 222 view.on("pointer-move", function(event) { 223 // Update cursor based on hover state 224 view.hitTest(event).then(function(response) { 225 const results = response.results; 226 if (results.length > 0) { 227 const graphic = results.find(function(result) { 228 return result.graphic.layer === geojsonLayer || pointGraphics.includes(result.graphic); 229 })?.graphic; 230 231 if (graphic && graphic.attributes && graphic.attributes.Name) { 232 // Change cursor to pointer 233 view.container.style.cursor = "pointer"; 234 235 // If hovering over a new graphic 236 if (hoveredGraphic !== graphic) { 237 hoveredGraphic = graphic; 238 // Update tooltip content 239 tooltip.innerHTML = graphic.attributes.Name; 240 // Show tooltip 241 tooltip.style.display = 'block'; 242 } 243 244 // Position the tooltip near the cursor 245 tooltip.style.left = event.x + 'px'; 246 tooltip.style.top = event.y + 'px'; 247 248 return; 249 } 250 } 251 252 // If not hovering over any graphic 253 hoveredGraphic = null; 254 tooltip.style.display = 'none'; 255 view.container.style.cursor = "default"; 256 }); 257 }); 258 259 // Use reactiveUtils to monitor selectedFeature and visible properties 260 reactiveUtils.watch(() => view.popup.selectedFeature, (newFeature) => { 261 if (activeGraphic) { 262 // Reset the symbol of the previously active graphic to default 263 activeGraphic.symbol = defaultMarkerSymbol; 264 } 265 if (newFeature) { 266 // Set the new active graphic 267 activeGraphic = newFeature; 268 269 // Update the symbol to active 270 activeGraphic.symbol = activeMarkerSymbol; 271 } else { 272 // If no feature is selected, reset activeGraphic 273 activeGraphic = null; 274 } 275 } 276 ); 277 278 reactiveUtils.watch( () => view.popup.visible, (isVisible) => { 279 if (!isVisible && activeGraphic) { 280 // Reset the symbol when the popup is closed 281 activeGraphic.symbol = defaultMarkerSymbol; 282 activeGraphic = null; 283 } 284 } 285 ); 286 287 // Disable certain key and mouse actions 288 view.on("key-down", (event) => { 289 const prohibitedKeys = ["+", "-", "Shift", "_", "="]; 290 const keyPressed = event.key; 291 if (prohibitedKeys.indexOf(keyPressed) !== -1) { 292 event.stopPropagation(); 293 } 294 }); 295 296 view.on("mouse-wheel", (event) => { 297 event.stopPropagation(); 298 }); 299 300 view.on("double-click", (event) => { 301 event.stopPropagation(); 302 }); 303 304 view.on("double-click", ["Control"], (event) => { 305 event.stopPropagation(); 306 }); 307 308 view.on("drag", (event) => { 309 event.stopPropagation(); 310 }); 311 312 view.on("drag", ["Shift"], (event) => { 313 event.stopPropagation(); 314 }); 315 316 view.on("drag", ["Shift", "Control"], (event) => { 317 event.stopPropagation(); 318 }); 319 320 // Optional: Handle window resize to adjust the map 321 window.addEventListener("resize", function() { 322 view.resize(); 323 }); 324 }); 325});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.