Как вставить карту из ArcGIS в div с помощью плагинов Leaflet?

У меня есть приложение на ionic, которое работает с представлениями, в представлении хотят вставить карту в div, но это невозможно для объявления body css, я хочу сейчас, если существует обертка для отображения этих карт или если я нужен правильный css.

Ионный вид

<ion-view view-title="Map" can-swipe-back="false" hide-back-button="false">
  <h1>Map view</h1>
  <button ng-click="map.reloadState()" class="button positive-button">Change State!!!</button>
<\ion-view>

Пример карты

<!DOCTYPE html>
<html>
<head>
 <!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>

<!-- Load Esri Leaflet locally, after cloning this repository -->
<script src="http://cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.7/esri-leaflet.js"></script>

<style>
  html, body, #map {
    margin:0; padding:0;  width : 100%; height : 100%;
  }
</style>
</head>
<body>
<div id="map"></div>
<script>
  var map = L.map('map').setView([45.528, -122.680], 13);

  L.esri.basemapLayer("Gray").addTo(map);

  var parks = L.esri.featureLayer({
    url: "http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0",
    style: function () {
      return { color: "#70ca49", weight: 2 };
    }
  }).addTo(map);

  var popupTemplate = "<h3>{NAME}</h3>{ACRES} Acres<br><small>Property ID: {PROPERTYID}<small>";

  parks.bindPopup(function(e){
    return L.Util.template(popupTemplate, e.feature.properties)
  });
</script>
</body>
</html>
Источник

0 ответов

Другие вопросы по тегам