2014-07-11 3 views
-1

지도 상자 맵에 여러 마커를 가져오고 싶습니다. 여기서 csv 파일은 사용할 아이콘의 이름을 정의합니다. csv로 테이블은 다음과 같습니다지도 상자의 csv에서 iconurl 가져 오기

pID,qID,longitude,latitude,bearing(degree),orientation(36),color,icon 
PID1,QID35,90.39210677,23.7756582,80.1120824,8,3,3.png 
PID1,QID40,90.39045721,23.77525565,216.2854365,22,6,6.png 

나는 (적어도 나는 그 잡식 동물이 무엇을하고 있는지 생각) geojson하는

내가 사용하는 코드를이 CSV를 변환하는 잡식 동물을 사용하고 아래 다음과 같습니다 :


<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Custom marker styles for imported data</title> 
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script> 
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' /> 
<style> 
    body { margin:0; padding:0; } 
    #map { position:absolute; top:0; bottom:0; width:100%; } 
</style> 
</head> 
<body> 
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script> 

<div id='map'></div> 

<script> 
var southWest = L.latLng(23.7, 90.2), 
    northEast = L.latLng(23.9, 90.7), 
    bounds = L.latLngBounds(southWest, northEast); 

var map = L.mapbox.map('map', 'bakr89.imia9old', { 
    maxBounds: bounds, 
    maxZoom: 17, 
    minZoom: 14 
}).setView([23.775507, 90.3909], 16); 

// Omnivore will AJAX-request this file behind the scenes and parse it: 
// note that there are considerations: 
// - The CSV file must contain latitude and longitude values, in column 
// named roughly latitude and longitude 
// - The file must either be on the same domain as the page that requests it, 
// or both the server it is requested from and the user's browser must 
// support CORS. 

var csvdata = omnivore.csv('csvmarker.csv'), 


var myLayer = L.mapbox.featureLayer(csvdata).addTo(map) 
var myIcon = L.icon({ 
     iconUrl: 'csvdata.icon', 
     iconSize: [40, 40], 
     iconAnchor: [20, 20], 
     popupAnchor: [0, -25], 
    }); 
    // Set a custom icon on each marker based on feature properties. 
    myLayer.on('layeradd', function(e) { 
     var marker = e.layer, 
      feature = marker.feature; 

     marker.setIcon(L.icon(feature.properties.icon)); 
    } 
    ); 

    // Add features to the map. 
    myLayer.setGeoJSON(csvdata); 
</script> 
</body> 
</html> 

나는 코더 아니에요, 나는 일주일 정도 mapbox와 장난 있었어요. 이 코드에서 누락 된 부분을 보도록 도와 줄 수 있다고 생각하십니까? CSV의 경우 잡식 동물의

+0

처럼 지금까지이에 대한 해결책을 발견인가? –

답변

0

적절한 사용은

var southWest = L.latLng(23.7, 90.2), 
    northEast = L.latLng(23.9, 90.7), 
    bounds = L.latLngBounds(southWest, northEast); 

var map = L.mapbox.map('map', 'bakr89.imia9old', { 
    maxBounds: bounds, 
    maxZoom: 17, 
    minZoom: 14 
}).setView([23.775507, 90.3909], 16); 

omnivore.csv('csvmarker.csv').addTo(map); 
관련 문제