mapbox

How to get unique feature properties from geojson source in Mapbox GL JS?

痴心易碎 提交于 2020-05-16 01:35:09
问题 I've defined a mapbox geojson source: map.addSource("places", { type: "geojson", data: "http://example.com/myfile.geojson", }); My geojson source file has this structure: { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "icon": "theatre" }, "geometry": { "type": "Point", "coordinates": [-77.038659, 38.931567] }}, { "type": "Feature", "properties": { "icon": "music" }, "geometry": { "type": "Point", "coordinates": [-77.020945, 38.878241] }}, ...] } I would like

Adding custom icons for each feature in feature collection with mapbox-gl-js

假如想象 提交于 2020-05-11 21:18:32
问题 I need to have different custom images for each points in the map using mapbox-gl-js, But I don't find a way to give custom icon for each feature in a feature collection incidentMarkers = { "type": "FeatureCollection" "features": [{ "type": "geojson", "data": { "type": "Feature", "properties": { }, "geometry": { "type": "Point", "coordinates": [ longitude latitude ] } } }, { "type": "geojson", "data": { "type": "Feature", "properties": { }, "geometry": { "type": "Point", "coordinates": [

Tutorial of the Website "Awesome of COVID-19"

喜你入骨 提交于 2020-05-08 05:11:56
My Ph.D. project will focus on the application of spatial technology in Spatial Lifecourse Epidemiology. With the pandemic of COVID-19, I built up a website, "Awesome of COVID-19", which collected the related resources of COVID-19 researches. This article is the tutorial of this website. Snap spot of the website. Url of the Weibsite? Click it 1 The tutorial of the website I developed this website by docsite . The website consists of four pages including Home, Resources, Work, and Community. Besides, there are two buttons including language and search. Once you click the 'language' button, the

mapbox 支持国家2000 坐标系的数据

陌路散爱 提交于 2020-05-01 07:05:49
最近有个项目使用mapbox作为地图展示,但是mapbox 只支持web 墨卡托(3857)坐标系的数据。而客户想接入其他单位发布的共享数据,共享数据都是基于arcgisserver 发布的国家2000坐标系的数据服务。所以研究了一些解决方案。 研究目标: 基于mapbox 能够接入国家2000 坐标系下的栅格切片服务,矢量数据服务 背景说明: 1、 Mapbox 官方版本只支持基于osm 标准的栅格地图服务,以及3857(web墨卡托)投影的矢量切片数据 2、 共享平台提供的地图服务都是基于arcgisserver 发布的国家2000坐标系的数据,包括栅格切片跟矢量数据(WMS,WFS) 研究过程: 1、 基于超图官方提供的能够支持多坐标系的mapbox扩展:mapbox-gl-enhance.js 分析结果: 1) 支持超图平台发布的国家2000,北京54,西安80坐标系的上栅格切片服务和矢量数据服务。 2) 整个地图只支持一种坐标系格式,不能添加其他坐标系的数据,地图初始化设置某一个种坐标系后,其他数据会参照改坐标系进行转换 3) 超图可以转发ArcGISServer 发布的国家2000坐标系的栅格地图服务,在mapbox 中展示 2、 第三方公司mapbox-gl,网上下载的js 分析结果: 支持国家2000坐标系的矢量数据服务,不支持国家2000坐标系的栅格切片服务

3D GIS 应用开发 —— 基于 Mapbox GL 的实践总结

血红的双手。 提交于 2020-05-01 07:05:34
最近在折腾的 web 端的可视化项目,由于相关业务的需要,用到了 Mapbox 这一地图开发的神器。在此先奉上一个基于mapbox-gl实现的demo(来源: uber的deck.gl项目 ): 下面我们从这个项目一步步来介绍 Mapbox 的前端 GIS 引擎 Mapbox GL JS . 一、简单了解 首先,Mapbox 在地图领域是一家很 Newbee 的公司。已为 Foursquare、Pinterest、Evernote、金融时报、天气频道、优步科技 等公司的网站提供了订制在线地图服务。 自2010年起,该公司快速地拓展了订制地图的市场地位,以回应 Google地图 等地图供应商提供的有限选择。Mapbox 是一些开放源代码地图库及应用程序的创建者或最大的贡献者,其中包含了MBTiles 规范、TileMill 制图 IDE、Leaflet JavaScript 库,以及 CartoCSS 地图格式化语言与语法分析器等。 该公司的数据同时从开放与专有的来源获取,开放的数据源如 开放街图(OSM, Open Street Map) 以及 NASA 等,而专有的数据源则包含了 DigitalGlobe。其技术奠基于 Node.js、CouchDB、Mapnik、GDAL 与 Leafletjs。 Mapbox 针对不同平台均开发了相应的 GIS

Leaflet入门:添加点线面并导入GeoJSON数据|Tutorial of Leaflet: Adding Points, Lines, Polygons and Import GeoJSO...

青春壹個敷衍的年華 提交于 2020-05-01 05:06:33
Web GIS系列: 1. 搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 2. 使用GeoServer+QGIS发布WMTS服务 3. 使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务 4. Leaflet入门:添加点线面并导入GeoJSON数据 OpenLayers与Leaflet都是开源WebGIS组件中的佼佼者。之前的WebGIS系列博客中,重点以OpenLayers为JavaScript库,获得了广大GISer的关注。本文将对Leaflet进行详细介绍。所有代码都会整理并上传到GitHub上,欢迎Star和Fork! 本篇文章主要参考了Leaflet官方的入门介绍。 Quick Start Using GeoJSON 第一幅地图 首先是初始化地图并加载底图,其中setView可以设定视图的中心点和缩放层级。对于底图,可以调用OSM的切片地图,也可以调用Mapbox的切片地图。对于Mapbox的地图,需要申请API key之后才能调用。不同风格的地图可以参考: https://studio.mapbox.com/tilesets/ 初始化地图代码如下: // Init the map var mymap = L.map('mapid').setView([51

Rounded corner mapbox mapView

纵饮孤独 提交于 2020-04-30 10:28:26
问题 So I'm trying to add a small mini map to my android app with a mapbox mapView. I'm trying to add rounded corners to it and I can't seem to find a way to do that. Is there a good way to do this? I know one option is to use a CardView but it doesn't seem to round the corners of the map. 回答1: <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="400dp" app:cardCornerRadius="12dp" app:cardElevation="12dp"> Put your mapview in here </android.support.v7

Rounded corner mapbox mapView

喜欢而已 提交于 2020-04-30 10:28:06
问题 So I'm trying to add a small mini map to my android app with a mapbox mapView. I'm trying to add rounded corners to it and I can't seem to find a way to do that. Is there a good way to do this? I know one option is to use a CardView but it doesn't seem to round the corners of the map. 回答1: <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="400dp" app:cardCornerRadius="12dp" app:cardElevation="12dp"> Put your mapview in here </android.support.v7

How to get elevation profile data from Mapbox?

狂风中的少年 提交于 2020-04-30 10:21:27
问题 my question is, how to get an elevation profile of the specified route from the MapBox service. On the input we have path / route as the array of coordinates (latitute, longitute). As the result we would like to get the array of the pairs coordinate - elevation. In case the resolution of elevation data is higher than the route coordinates provided, the result should contain also the elevation data between the original coordinates. The new points on the route would be generated according to

Disable horizontal repeating of world map with mapbox

一个人想着一个人 提交于 2020-04-13 06:50:41
问题 I'm quite new to JS, so maybe my problem will be easy to solve, though I already spent many hours on it. I'm using Mapbox with the leaflet api, and I would like to disable the repeating of horizontal world maps when zooming out. I already explored the maxBounds properties, but it is not satisfying, as I want to hide the map outside the bounds. Basically, I would like to have this result http://jsfiddle.net/zF6bf/ but instead of "canvas", I would like to have this map, stored on mapbox.com :