[Javascript] Adding Shapes to Maps with Leaflet and GeoJSON

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Leaflet Demo</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/>

</head>
<body>

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

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

</body>
</html>

$.getJSON(‘//jsbin.com/qogati/1.js‘, renderMap);

function renderMap (geoData) {
  var map = L.map(‘map‘);
  var osm = ‘//{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png‘;

  L.tileLayer(osm).addTo(map);

  var geoJson = L.geoJson(geoData, {
    style: function (feature) {
      return {
        weight: 1,
        opacity: 0.5,
        color: ‘#00ff00‘,
        fillColor: ‘#00dd00‘,
        fillOpacity: 0.2
      }
    }
  }).addTo(map);
  map.fitBounds(geoJson.getBounds());
}

时间： 2024-10-11 16:53:44

[Javascript] Adding Shapes to Maps with Leaflet and GeoJSON的相关文章

[Javascript] Webpack Loaders, Source Maps, and ES6

Using ES6 To use ES6, we need loader. Modify webpack.config.js file: module.exports = { entry: './index.js', output: { filename: 'bundle.js', path: __dirname }, module: { loaders: [ {test: /\.js$/, loader: 'babel', exclude: '/node_modules/'} ] } }; W

JavaScript资源大全中文版（Awesome最新版）

JavaScript资源大全中文版(Awesome最新版) 目录前端MVC框架与库 Package Managers Loaders Bundlers Testing Frameworks QA Tools QA工具 Node-Powered CMS Frameworks 节点供电的CMS框架 Templating Engines 模板发动机 Articles and Posts 文章和帖子 Data Visualization 数据可视化 Timeline 时间线 Spreadsheet 电

Google Maps API Web Services

原文:Google Maps API Web Services 摘自:https://developers.google.com/maps/documentation/webservices/ Google Maps API Web Services 本文将探讨 Google Maps API Web Services,这是一个为您的地图应用程序提供地理数据的 Google 服务的 HTTP 接口集合.本指南仅旨在介绍通用于所有不同服务的 Web 服务和托管信息.每个服务的单个文档位于以下位置:

The tilde ( ~ ) operator in JavaScript

From the JavaScript Reference on MDC, ~ (Bitwise NOT) Performs the NOT operator on each bit. NOT a yields the inverted value (a.k.a. one’s complement) of a. The truth table for the NOT operation is: a NOT a 0 1 1 0 Example: 9 = 0000000000000000000000

使用谷歌地图 Javascript版

谷歌称Map JavaScript V3版是同时为PC和移动设备开发的,使用Html5. 首先需要在 Google Console 申请KEY,创建一个 Browser key ,简单demo就可以使用: <!DOCTYPE html> <html> <head> <title>Asynchronous Loading</title> <meta name="viewport" content="initia

box2d.js

https://github.com/kripken/box2d.js/ Demo: http://kripken.github.io/box2d.js/webgl_demo/box2d.html 演示: http://kripken.github.io/box2d.js/webgl_demo/box2d.html Example code to give you an idea of the API: https://github.com/kripken/box2d.js/blob/maste

WebGIS开源解决方案之开发环境搭建(四)

续前几篇文章,前面陆续介绍了开源GIS服务器Geoserver,开源数据库Postpresql以及开源前端udig的安装和基本使用. WebGIS前端开发,可以选择arcgis for javascript,arcgis for flex,Openlayers2, Openlayers3,leaflet.Arcgis for javascript 和Arcgis for flex 属于ESRI公司的前端产品,使用这些前端做项目开发,不会收费.本篇既然是讲开源WebGIS解决方案,Web前端开发框

MongoDB - The mongo Shell, Write Scripts for the mongo Shell

You can write scripts for the mongo shell in JavaScript that manipulate data in MongoDB or perform administrative operation. For more information about the mongo shell, see the Running .js files via a mongo shell Instance on the Server section for mo

Google地图之OverlayView使用（自定义叠加层）

Google Maps API 第 3 版提供了用于创建自定义叠加层的 OverlayView 类.OverlayView 是一个基类,提供了您在创建叠加层时必须实现的若干方法.该类还提供了一些方法,用于实现屏幕坐标和地图位置之间的转换. 要创建自定义叠加层,请执行以下操作: 将自定义对象的 prototype 设置为 google.maps.OverlayView() 的新实例.这可以有效地实现叠加层类的“子类化”. 为自定义叠加层创建构造函数,并将该构造函数中的所有初始化参数都设置为自定义属