Add Multiple Geometries from One GeoJSON Source
A single GeoJSON source in Maptoolkit Maps JS can contain a mix of geometry types, and you can add multiple layers that each reference the same source with a different geometry filter. This avoids duplicating data and keeps your source management simple. Use this pattern when your dataset contains related features of different types, such as a network of roads, intersections, and service areas all stored in one file.
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [12.0, 47.5],
zoom: 7,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
const geojson = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: { type: 'Polygon', coordinates: [[[10.5, 47.0], [12.5, 47.0], [12.5, 48.0], [10.5, 48.0], [10.5, 47.0]]] },
properties: { type: 'region' }
},
{
type: 'Feature',
geometry: { type: 'LineString', coordinates: [[11.39085, 47.27574], [13.0550, 47.8095], [16.3738, 48.2082]] },
properties: { type: 'route' }
},
{
type: 'Feature',
geometry: { type: 'Point', coordinates: [11.39085, 47.27574] },
properties: { type: 'city', name: 'Innsbruck' }
},
{
type: 'Feature',
geometry: { type: 'Point', coordinates: [16.3738, 48.2082] },
properties: { type: 'city', name: 'Vienna' }
}
]
};
map.on('load', () => {
map.addSource('mixed', { type: 'geojson', data: geojson });
map.addLayer({ id: 'polygon', type: 'fill', source: 'mixed',
filter: ['==', '$type', 'Polygon'],
paint: { 'fill-color': '#3887be', 'fill-opacity': 0.2 }
});
map.addLayer({ id: 'polygon-outline', type: 'line', source: 'mixed',
filter: ['==', '$type', 'Polygon'],
paint: { 'line-color': '#3887be', 'line-width': 2 }
});
map.addLayer({ id: 'line', type: 'line', source: 'mixed',
filter: ['==', '$type', 'LineString'],
paint: { 'line-color': '#ee8a65', 'line-width': 3 }
});
map.addLayer({ id: 'points', type: 'circle', source: 'mixed',
filter: ['==', '$type', 'Point'],
paint: { 'circle-radius': 8, 'circle-color': '#56b881', 'circle-stroke-width': 2, 'circle-stroke-color': '#fff' }
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Multiple Geometries from One GeoJSON Source - Maptoolkit Maps JS</title>
<meta property="og:description" content="Render points, lines, and polygons from a single GeoJSON source using multiple layers." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.css" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [12.0, 47.5],
zoom: 7,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
const geojson = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: { type: 'Polygon', coordinates: [[[10.5, 47.0], [12.5, 47.0], [12.5, 48.0], [10.5, 48.0], [10.5, 47.0]]] },
properties: { type: 'region' }
},
{
type: 'Feature',
geometry: { type: 'LineString', coordinates: [[11.39085, 47.27574], [13.0550, 47.8095], [16.3738, 48.2082]] },
properties: { type: 'route' }
},
{
type: 'Feature',
geometry: { type: 'Point', coordinates: [11.39085, 47.27574] },
properties: { type: 'city', name: 'Innsbruck' }
},
{
type: 'Feature',
geometry: { type: 'Point', coordinates: [16.3738, 48.2082] },
properties: { type: 'city', name: 'Vienna' }
}
]
};
map.on('load', () => {
map.addSource('mixed', { type: 'geojson', data: geojson });
map.addLayer({ id: 'polygon', type: 'fill', source: 'mixed',
filter: ['==', '$type', 'Polygon'],
paint: { 'fill-color': '#3887be', 'fill-opacity': 0.2 }
});
map.addLayer({ id: 'polygon-outline', type: 'line', source: 'mixed',
filter: ['==', '$type', 'Polygon'],
paint: { 'line-color': '#3887be', 'line-width': 2 }
});
map.addLayer({ id: 'line', type: 'line', source: 'mixed',
filter: ['==', '$type', 'LineString'],
paint: { 'line-color': '#ee8a65', 'line-width': 3 }
});
map.addLayer({ id: 'points', type: 'circle', source: 'mixed',
filter: ['==', '$type', 'Point'],
paint: { 'circle-radius': 8, 'circle-color': '#56b881', 'circle-stroke-width': 2, 'circle-stroke-color': '#fff' }
});
});
</script>
</body>
</html>Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.
Use the Maptoolkit Connector. Create an interactive map with zoom level 7, centered around [12.0, 47.5]. From a single GeoJSON source, render a polygon over [10.5, 47.0] to [12.5, 48.0], a line from Innsbruck to Salzburg to Vienna, and circle markers for Innsbruck and Vienna.