{"id":3400,"date":"2021-01-06T14:55:04","date_gmt":"2021-01-06T14:55:04","guid":{"rendered":"https:\/\/contentlab.com\/using-the-tomtom-maps-sdk-for-web-with-asp-net-core-part-1\/"},"modified":"2021-11-17T16:40:23","modified_gmt":"2021-11-17T16:40:23","slug":"using-the-tomtom-maps-sdk-for-web-with-asp-net-core-part-1","status":"publish","type":"post","link":"https:\/\/contentlab.com\/using-the-tomtom-maps-sdk-for-web-with-asp-net-core-part-1\/","title":{"rendered":"Using the TomTom Maps SDK for Web with ASP.NET Core, Part 1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3400\" class=\"elementor elementor-3400\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2e641e74 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"2e641e74\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b7ff845\" data-id=\"b7ff845\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0e39025 elementor-widget elementor-widget-text-editor\" data-id=\"0e39025\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>TomTom Maps SDK is a set of libraries that offer robust and comprehensive location services, including maps, search, routing, traffic, and geofencing. TomTom Maps SDKs are available for different platforms\u2014Android, iOS, and Web.<\/p><p>But can we put TomTom Maps SDK for Web to work with a popular web framework, such as ASP.NET Core? The answer is yes. This article will discuss how you can integrate TomTom SDK with an MVC project and a Web API service by injecting data into your map from your server-side code, and requesting server data from the client side.<\/p><p>TomTom Maps SDK for Web is a JavaScript library that can produce maps in a standalone HTML page or inside a sophisticated web framework, such as\u00a0<a href=\"https:\/\/contentlab.com\/using-the-tomtom-maps-sdk-for-web-with-asp-net-core-part-2\/\">ASP.NET Core<\/a>. Let\u2019s see how this is done by developing a new Model-View-Controller (MVC) web app. We\u2019ll also develop the HTML code as our view.<\/p><h2><a id=\"_30j0zll\" name=\"_30j0zll\"><\/a>Setting Up an ASP.Net Core Project<\/h2><p>The example project here requires\u00a0<a href=\"https:\/\/visualstudio.microsoft.com\/downloads\/?utm_medium=microsoft&amp;utm_source=docs.microsoft.com&amp;utm_campaign=inline+link&amp;utm_content=download+vs2019\">Visual Studio 2019 16.4 or later<\/a>\u00a0with the ASP.NET and web development workload and\u00a0<a href=\"https:\/\/dotnet.microsoft.com\/download\/dotnet-core\/3.1\">.NET Core 3.1 SDK or later<\/a>. Visual Studio Community 2019 is fine for this project.<\/p><p>You\u2019ll also need to register as a developer on the\u00a0<a href=\"https:\/\/developer.tomtom.com\/\">TomTom Developer Portal<\/a>\u00a0and get an API key.<\/p><p>Next, create a new web app project in Visual Studio using these settings:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">Select ASP.NET Core Web Application.<\/li><li style=\"font-size: 16px;\">Name the project\u00a0<span style=\"font-weight: bolder;\">TomTomWeb<\/span>\u00a0to keep the same namespace as in our demo app.<\/li><li style=\"font-size: 16px;\">Select Web Application (Model-View-Controller) \u2014 make sure you select the\u00a0<span style=\"font-weight: bolder;\">ASP.NET Core 3.1<\/span>\u00a0version.<\/li><\/ul><p>Visual Studio uses the default template for the MVC project you just created.<\/p><p>Now, right-click the project name and assign port 5000 to the App URL:<\/p><p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-4185 size-full\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186257516_f887abce8e_o.png\" alt=\"\" width=\"395\" height=\"190\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186257516_f887abce8e_o.png 395w, https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186257516_f887abce8e_o-300x144.png 300w\" sizes=\"(max-width: 395px) 100vw, 395px\" \/><\/p><p>Now press F5 to run the web app:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/50186511487_45fcf5f7a9_o.png\" \/><\/p><p>Next we\u2019ll install the TomTom client libraries locally.<\/p><p>Go to Solution Explorer, right-click the project name and choose\u00a0<span style=\"font-weight: bolder;\">Add &gt; Client-Side Library<\/span>. When the dialog appears, select the\u00a0<span style=\"font-weight: bolder;\">unpkg\u00a0<\/span>library provider, type &#8220;<em>tomtom<\/em>&#8221; in the\u00a0<span style=\"font-weight: bolder;\">Library<\/span>\u00a0textbox, and choose the @tomtom-international\/web-sdk-maps library:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/50186511457_5c28e6e6de_o.png\" \/><\/p><p>After the installation, you\u2019ll see that the TomTom\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">@tomtom-international\/web-sdk-maps<\/span>\u00a0package has been installed as a client library:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/50186511402_49c66b323a.jpg\" \/><\/p><p>Now it\u2019s time to add a reference to this client library. You can do this by modifying the MVC view directly, or by changing the\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">_Layout.cshtml<\/span>\u00a0file to include references to\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">map.css<\/span>\u00a0and\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">maps-web.min.js<\/span>:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-650cee9 elementor-widget elementor-widget-code-highlight\" data-id=\"650cee9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>...\r\n\r\n    <link rel=\"stylesheet\" href=\"~\/css\/site.css\" \/>\r\n\r\n    <link href=\"~\/lib\/@@tomtom-international\/web-sdk-maps\/dist\/maps.css\" \r\n\r\n        rel=\"stylesheet\" \/>\r\n\r\n<\/head>\r\n\r\n...\r\n\r\n    <script src=\"~\/lib\/jquery\/dist\/jquery.min.js\"><\/script>\r\n\r\n    <script src=\"~\/lib\/bootstrap\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n\r\n    <script src=\"~\/js\/site.js\" asp-append-version=\"true\"><\/script>    \r\n\r\n    <script \r\n\r\n        src=\"~\/lib\/@@tomtom-international\/web-sdk-maps\/dist\/maps-web.min.js\">\r\n\r\n    <\/script>\r\n\r\n    @RenderSection(\"Scripts\", required: false)\r\n\r\n<\/body>\r\n\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b065d77 elementor-widget elementor-widget-text-editor\" data-id=\"b065d77\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Application security is beyond the scope of this article and isn\u2019t required for our demo app, but you will need to secure your ASP.NET Core web apps in the real world.<\/p><h2><a id=\"_1fob9te\" name=\"_1fob9te\"><\/a>The Client-Side: TomTom Maps SDK for Web<\/h2><p>The previous section showed how it is easy to plug TomTom Maps SDK right into a website. With the SDK, you can incorporate maps, routes, geocoding, and other location services without having to call individual API services.<\/p><p>ASP.NET Core, on the other hand, is a server-side framework that dynamically generates HTML. Dynamic content generation allows us to populate the view&#8217;s HTML with server-side data.<\/p><p>In most web applications, server-side data comes from some form of database storage. In this demo app, however, we&#8217;re going to work with a static JSON file for the sake of simplicity. This way, we won&#8217;t need to configure and connect to a database, keeping the focus on the mapping features.<\/p><p>In the ASP.NET Core web application we just created, let&#8217;s replace the contents of the\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">Index.cshtml<\/span>\u00a0with this code:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7215ef1 elementor-widget elementor-widget-code-highlight\" data-id=\"7215ef1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>@{ ViewData[\"Title\"] = \"World Map\"; }\r\n\r\n<style>\r\n\r\n    #map {\r\n\r\n        height: 500px;\r\n\r\n        width: 1200px;\r\n\r\n    }\r\n\r\n<\/style>\r\n\r\n<div id='map' class='map'><\/div>\r\n\r\n@section Scripts {\r\n\r\n    <script>\r\n\r\n        let map;\r\n\r\n        map = tt.map({\r\n\r\n            key: 'MY_TOMTOM_KEY',\r\n\r\n            container: 'map',\r\n\r\n            zoom: 1.5,\r\n\r\n            center: [0, 40],\r\n\r\n            style: 'tomtom:\/\/vector\/1\/basic-main'\r\n\r\n        });\r\n\r\n    <\/script>\r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b2f21a7 elementor-widget elementor-widget-text-editor\" data-id=\"b2f21a7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>This code includes the HTML markup for displaying the map\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">(&lt;div id=&#8217;map&#8217; class=&#8217;map&#8217;&gt;&lt;\/div&gt;)<\/span>\u00a0and the JavaScript to configure and render the map itself\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">(map = tt.map({&#8230;});)<\/span>. Before you run the web app, use your own API key for\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">MY_TOMTOM_KEY<\/span>.<\/p><p>Now when you run the application you&#8217;ll see the map.<\/p><p><img decoding=\"async\" class=\"alignnone wp-image-4186 size-full\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186511432_fcbfa12e0a_c.jpg\" alt=\"\" width=\"799\" height=\"426\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186511432_fcbfa12e0a_c.jpg 799w, https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186511432_fcbfa12e0a_c-300x160.jpg 300w, https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186511432_fcbfa12e0a_c-768x409.jpg 768w\" sizes=\"(max-width: 799px) 100vw, 799px\" \/><\/p><h2><a id=\"_3znysh7\" name=\"_3znysh7\"><\/a>Injecting Data from Server-Side into HTML<\/h2><p>Of course, you don\u2019t want to hard-code your TomTom API key in your JavaScript code. That\u2019s why we\u2019ll pass that key as a ViewData entry in the\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">HomeController<\/span>\u00a0class:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1552bdf elementor-widget elementor-widget-code-highlight\" data-id=\"1552bdf\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>public class HomeController : Controller\r\n\r\n{\r\n\r\n    private readonly ILogger<HomeController> _logger;\r\n\r\n    private const string MyTomTomKey = \"MY_TOMTOM_KEY\";\r\n\r\n    public HomeController(ILogger<HomeController> logger)\r\n\r\n    {\r\n\r\n        _logger = logger;\r\n\r\n    }\r\n\r\n    public IActionResult Index()\r\n\r\n    {\r\n\r\n        ViewData[\"MyTomTomKey\"] = MyTomTomKey;\r\n\r\n        return View();\r\n\r\n    }<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7851666 elementor-widget elementor-widget-text-editor\" data-id=\"7851666\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Now we\u2019ll add a hidden field to store the key rendered server-side. Notice how our key value is combined with HTML code. This rendering is done by the\u00a0<span style=\"font-weight: bolder;\">Razor engine<\/span>\u00a0that comes with the ASP.NET Core installation.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a3ecdd elementor-widget elementor-widget-code-highlight\" data-id=\"1a3ecdd\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><input id=\"myTomTomKey\" type=\"hidden\" value=\"@ViewData[\"MyTomTomKey\"]\" \/><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ffb1d99 elementor-widget elementor-widget-text-editor\" data-id=\"ffb1d99\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>We can use jQuery to get the TomTom API key value and provide it to the\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">map()<\/span>\u00a0function:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a506ec elementor-widget elementor-widget-code-highlight\" data-id=\"1a506ec\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>let myTomTomKey = $('#myTomTomKey').val();\r\n\r\nmap = tt.map({\r\n\r\n  key: myTomTomKey, ...<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0230360 elementor-widget elementor-widget-text-editor\" data-id=\"0230360\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Next, we want to place some markers on the World map. Each marker represents a famous place. Declare the JavaScript array before the map initialization:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ceed035 elementor-widget elementor-widget-code-highlight\" data-id=\"ceed035\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>let famousPlaces = [\r\n\r\n    {\r\n\r\n        \"id\": 1,\r\n\r\n        \"name\": \"Central Park, N.Y., United States\",\r\n\r\n        \"center\": [-73.9712, 40.7831]\r\n\r\n    },\r\n\r\n    {\r\n\r\n        \"id\": 2,\r\n\r\n        \"name\": \"Plaza Mayor, Madrid, Spain\",\r\n\r\n        \"center\": [-3.7074, 40.4155]\r\n\r\n    },\r\n\r\n    {\r\n\r\n        \"id\": 3,\r\n\r\n        \"name\": \"Taj Mahal Garden, Agra, India\",\r\n\r\n        \"center\": [78.0421, 27.1732]\r\n\r\n    },\r\n\r\n    {\r\n\r\n        \"id\": 4,\r\n\r\n        \"name\": \"Red Square, Moscow, Russia\",\r\n\r\n        \"center\": [37.61970, 55.75432]\r\n\r\n    }\r\n\r\n];<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-40c90d1 elementor-widget elementor-widget-text-editor\" data-id=\"40c90d1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Now we\u2019ll iterate through the famous places array to create the markers on the map:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-20dc84b elementor-widget elementor-widget-code-highlight\" data-id=\"20dc84b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>for (var i = 0; i < famousPlaces.length; i++) {\r\n\r\n      let place = famousPlaces[i];\r\n\r\n      var marker = new tt.Marker().setLngLat(place.center).addTo(map);\r\n\r\n      var popupOffsets = {\r\n\r\n            bottom: [0, -40]\r\n\r\n      }\r\n\r\n      var popup = new tt.Popup({ offset: popupOffsets }).setHTML(place.name);\r\n\r\n      marker.setPopup(popup);\r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1febe4d elementor-widget elementor-widget-text-editor\" data-id=\"1febe4d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Note that each marker has a popup, which will be displayed when the marker is clicked:<\/p><p><img decoding=\"async\" class=\"alignnone wp-image-4187 size-full\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186257496_693c60e41c_o.png\" alt=\"\" width=\"775\" height=\"332\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186257496_693c60e41c_o.png 775w, https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186257496_693c60e41c_o-300x129.png 300w, https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186257496_693c60e41c_o-768x329.png 768w\" sizes=\"(max-width: 775px) 100vw, 775px\" \/><\/p><p>Just as with the TomTom API key, you shouldn\u2019t hard-code the famous places data in JavaScript code. Let\u2019s create a folder named json and add a new famous-places.json file:<\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4188\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186257481_362a7f9c09_o.png\" alt=\"\" width=\"212\" height=\"97\" \/><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c44d46 elementor-widget elementor-widget-code-highlight\" data-id=\"2c44d46\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-json line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-json\">\n\t\t\t\t\t<xmp>{\r\n\r\n  \"Places\": [\r\n\r\n    {\r\n\r\n      \"id\": 1,\r\n\r\n      \"name\": \"Central Park, N.Y., United States\",\r\n\r\n      \"center\": [ -73.9712, 40.7831 ]\r\n\r\n    },\r\n\r\n    {\r\n\r\n      \"id\": 2,\r\n\r\n      \"name\": \"Plaza Mayor, Madrid, Spain\",\r\n\r\n      \"center\": [ -3.7074, 40.4155 ]\r\n\r\n    },\r\n\r\n    {\r\n\r\n      \"id\": 3,\r\n\r\n      \"name\": \"Taj Mahal Garden, Agra, India\",\r\n\r\n      \"center\": [ 78.0421, 27.1732 ]\r\n\r\n    },\r\n\r\n    {\r\n\r\n      \"id\": 4,\r\n\r\n      \"name\": \"Red Square, Moscow, Russia\",\r\n\r\n      \"center\": [ 37.61970, 55.75432 ]\r\n\r\n    }\r\n\r\n  ]\r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56bc6c4 elementor-widget elementor-widget-text-editor\" data-id=\"56bc6c4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Now we\u2019ll read this JSON file from the HomeController and pass it as a model to our view:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60effb2 elementor-widget elementor-widget-code-highlight\" data-id=\"60effb2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>public async Task<IActionResult> IndexAsync()\r\n\r\n{\r\n\r\n    ViewData[\"MyTomTomKey\"] = MyTomTomKey;\r\n\r\n    var model = await GetPlaceCollection();\r\n\r\n    return View(\"Index\", model);\r\n\r\n}\r\n\r\nprivate async Task<string> GetPlaceCollection()\r\n\r\n{\r\n\r\n    var file = Path.Combine(Directory.GetCurrentDirectory(),\r\n\r\n        \"wwwroot\", \"json\", \"famous-places.json\");\r\n\r\n    return await System.IO.File.ReadAllTextAsync(file);\r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-21b3b13 elementor-widget elementor-widget-text-editor\" data-id=\"21b3b13\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Since the Razor view engine requires a typed model, we declare it as string:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a992c40 elementor-widget elementor-widget-code-highlight\" data-id=\"a992c40\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>@model string;<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e45a79 elementor-widget elementor-widget-text-editor\" data-id=\"1e45a79\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Once again, we create a new hidden field, but this time it will store the JSON contents rendered from the server side by the Razor view engine:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1fa577f elementor-widget elementor-widget-text-editor\" data-id=\"1fa577f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-604e377 elementor-widget elementor-widget-code-highlight\" data-id=\"604e377\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><input id=\"myTomTomKey\" type=\"hidden\" value=\"@ViewData[\"MyTomTomKey\"]\" \/>\r\n\r\n<input id=\"famousPlaces\" type=\"hidden\" value=\"@Model\" \/><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc4ce5b elementor-widget elementor-widget-text-editor\" data-id=\"dc4ce5b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Now, using\u00a0<a style=\"background-color: #ffffff;\" href=\"https:\/\/api.jquery.com\/category\/selectors\/\">jQuery syntax,<\/a>\u00a0replace the famousPlaces variable initialization with the value of the hidden field:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-039276c elementor-widget elementor-widget-code-highlight\" data-id=\"039276c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>let famousPlaces = JSON.parse($('#famousPlaces').val()).Places;<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5f5094 elementor-widget elementor-widget-text-editor\" data-id=\"e5f5094\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Running the web app again, we see it still works just like before:<\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4189\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186257481_362a7f9c09_o-1.png\" alt=\"\" width=\"212\" height=\"97\" \/><\/p><p>Note that our model is just a simple string. Let\u2019s create a proper C# model class, structured according to the JSON contents:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/50186511347_6b186c904d_o.png\" \/><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-911cab1 elementor-widget elementor-widget-code-highlight\" data-id=\"911cab1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>namespace TomTomWeb.Models\r\n\r\n{\r\n\r\n    public class PlaceCollection\r\n\r\n    {\r\n\r\n        public Place[] Places { get; set; }\r\n\r\n    }\r\n\r\n    public class Place\r\n\r\n    {\r\n\r\n        public int Id { get; set; }\r\n\r\n        public string Name { get; set; }\r\n\r\n        public double[] Center { get; set; }\r\n\r\n    }\r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e3ae285 elementor-widget elementor-widget-text-editor\" data-id=\"e3ae285\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>These classes can be used to pass the places data back and forth, from server side to client side, from C# to string, and then to JSON format, and vice versa, in a process called\u00a0<span style=\"font-weight: bolder;\"><em>serialization<\/em><\/span>.<\/p><p>In .NET, we often use the popular\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">Newtonsoft.Json<\/span>\u00a0library to serialize and deserialize data. Let\u2019s import this library via NuGet packages.<\/p><p>Select the web project name on the Solution Explorer window, then right-click the\u00a0<span style=\"font-weight: bolder;\">Manage NuGet Packages<\/span>\u00a0menu item and type &#8220;Newtonsoft&#8221; in the search box. Then install the package:<\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4190\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186511332_d53beaccae.jpg\" alt=\"\" width=\"499\" height=\"144\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186511332_d53beaccae.jpg 499w, https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50186511332_d53beaccae-300x87.jpg 300w\" sizes=\"(max-width: 499px) 100vw, 499px\" \/><\/p><p>Now, back to our model classes.<\/p><p>We can create some methods to help us with serializing and deserializing objects:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cce8386 elementor-widget elementor-widget-code-highlight\" data-id=\"cce8386\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>using Newtonsoft.Json;\r\n\r\nnamespace TomTomWeb.Models\r\n\r\n{\r\n\r\n    public class PlaceCollection\r\n\r\n    {\r\n\r\n        public Place[] Places { get; set; }\r\n\r\n        public static PlaceCollection FromJson(string json) => \r\n\r\n            JsonConvert.DeserializeObject<PlaceCollection>(json);\r\n\r\n        public string ToJson() => \r\n\r\n            JsonConvert.SerializeObject(this);\r\n\r\n    }\r\n\r\n    public class Place\r\n\r\n    {\r\n\r\n        public int id { get; set; }\r\n\r\n        public string name { get; set; }\r\n\r\n        public double[] center { get; set; }\r\n\r\n        public static Place FromJson(string json) =>\r\n\r\n            JsonConvert.DeserializeObject<Place>(json);\r\n\r\n        public string ToJson() =>\r\n\r\n            JsonConvert.SerializeObject(this);\r\n\r\n    }\r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d68a2d8 elementor-widget elementor-widget-text-editor\" data-id=\"d68a2d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>We need to modify the\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">GetPlaceCollection()<\/span>\u00a0method to serialize with the new\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">PlaceCollection<\/span>\u00a0and\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">Placeobjects<\/span>:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1a69f9 elementor-widget elementor-widget-code-highlight\" data-id=\"b1a69f9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>private async Task<PlaceCollection> GetPlaceCollection()\r\n\r\n{\r\n\r\n    var file = Path.Combine(Directory.GetCurrentDirectory(),\r\n\r\n        \"wwwroot\", \"json\", \"famous-places.json\");\r\n\r\n    return JsonConvert\r\n\r\n        .DeserializeObject<PlaceCollection>\r\n\r\n        (await System.IO.File.ReadAllTextAsync(file));\r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44af79d elementor-widget elementor-widget-text-editor\" data-id=\"44af79d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Next, we change the model type in our view:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-75d3241 elementor-widget elementor-widget-code-highlight\" data-id=\"75d3241\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>@model PlaceCollection;<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be184c3 elementor-widget elementor-widget-text-editor\" data-id=\"be184c3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>And change the hidden field to invoke the\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">PlaceCollection.ToJson()<\/span>\u00a0method:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a078720 elementor-widget elementor-widget-code-highlight\" data-id=\"a078720\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><input id=\"famousPlaces\" type=\"hidden\" value=\"@Model.ToJson()\" \/><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc8e661 elementor-widget elementor-widget-text-editor\" data-id=\"bc8e661\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Now, let\u2019s render buttons in our view, one for each place:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6963912 elementor-widget elementor-widget-code-highlight\" data-id=\"6963912\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div id=\"places-container\">\r\n\r\n    <a class=\"btn btn-dark\" href=\"#\" role=\"button\" onclick=\"javascript: showWorld();\">Show World<\/a>\r\n\r\n    @for (int i = 0; i < Model.Places.Length; i++)\r\n\r\n    {\r\n\r\n        var place = Model.Places[i];\r\n\r\n            <a class=\"btn btn-primary\" href=\"#\" role=\"button\" onclick=\"javascript: showPlace(@i);\">@place.name<\/a>\r\n\r\n    }\r\n\r\n<\/div>\r\n\r\n<h1 id=\"placeName\"><\/h1>\r\n\r\n<div id='map' class='map'><\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4d78e5 elementor-widget elementor-widget-text-editor\" data-id=\"a4d78e5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/50186257446_2f3784744f_o.png\" \/><\/p><p>When the user clicks each button, the map will be redrawn centered at that place. But we still have to implement three JavaScript functions to make it work: the initialize(), the showWorld(), and the showPlace() methods. The initialize() method ensures we only set up and create the map instance once in our app\u2019s lifetime. The showWorld() will then call map.jumpTo to reposition and centralize the map according to the given coordinates. Let\u2019s create the initialize and the showWorld functions and invoke them when the app starts:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8395db2 elementor-widget elementor-widget-code-highlight\" data-id=\"8395db2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>initialize();\r\n\r\nshowWorld();\r\n\r\nfunction initialize() {\r\n\r\n    map = tt.map({\r\n\r\n        key: myTomTomKey,\r\n\r\n        container: 'map',\r\n\r\n        style: 'tomtom:\/\/vector\/1\/basic-main'\r\n\r\n    });\r\n\r\n    for (var i = 0; i < famousPlaces.length; i++) {\r\n\r\n       ...\r\n\r\n    }\r\n\r\n}\r\n\r\nfunction showWorld() {\r\n\r\n    $('#placeName').html('');\r\n\r\n    map.jumpTo({\r\n\r\n        zoom: 1.5,\r\n\r\n        center: [0, 40]\r\n\r\n    });\r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f450dcf elementor-widget elementor-widget-text-editor\" data-id=\"f450dcf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>And now we add the\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">showPlace()<\/span>\u00a0method to jump to the selected location and zoom in:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ed7385 elementor-widget elementor-widget-code-highlight\" data-id=\"3ed7385\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function showPlace(i) {\r\n\r\n    let place = famousPlaces[i];\r\n\r\n    $('#placeName').html(place.name);\r\n\r\n    map.jumpTo({\r\n\r\n        zoom: 12,\r\n\r\n        center: place.center\r\n\r\n    });\r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e40be56 elementor-widget elementor-widget-text-editor\" data-id=\"e40be56\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4191\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50185714978_9d86ca1f6d_o.png\" alt=\"\" width=\"825\" height=\"449\" srcset=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50185714978_9d86ca1f6d_o.png 825w, https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50185714978_9d86ca1f6d_o-300x163.png 300w, https:\/\/contentlab.com\/wp-content\/uploads\/2021\/01\/50185714978_9d86ca1f6d_o-768x418.png 768w\" sizes=\"(max-width: 825px) 100vw, 825px\" \/><\/p><p>Let\u2019s modify the HomeController class to include a new endpoint named GetPlace(). This method will return details on the place when requested by the client JavaScript code:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3492b67 elementor-widget elementor-widget-code-highlight\" data-id=\"3492b67\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>public async Task<Place> GetPlace(int id)\r\n\r\n{\r\n\r\n    var collection = await GetPlaceCollection();\r\n\r\n    return collection.Places.Where(p => p.id == id).Single();\r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18a5e2f elementor-widget elementor-widget-text-editor\" data-id=\"18a5e2f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>When we run the web app, we can test the new\u00a0<span style=\"font-family: 'courier new', courier, monospace;\">\/GetPlace<\/span>\u00a0endpoint we just created:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/50185714948_100bc172ed_o.png\" \/><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c20c07 elementor-widget elementor-widget-code-highlight\" data-id=\"2c20c07\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><a class=\"btn btn-primary\" href=\"#\" role=\"button\" onclick=\"javascript: showPlace(@place.id);\">@place.name<\/a><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b528be9 elementor-widget elementor-widget-text-editor\" data-id=\"b528be9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>We\u2019ll then refactor the showPlace() function to make an additional request to the HomeController and get the selected place data:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4010b38 elementor-widget elementor-widget-code-highlight\" data-id=\"4010b38\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function showPlace(id) {\r\n\r\n    $.ajax('http:\/\/localhost:5000\/Home\/GetPlace\/' + id)\r\n\r\n        .done(function (place) {\r\n\r\n            $('#placeName').html(place.name);\r\n\r\n            map.jumpTo({\r\n\r\n                zoom: 12,\r\n\r\n                center: place.center\r\n\r\n            });\r\n\r\n        });\r\n\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7920ba4 elementor-widget elementor-widget-text-editor\" data-id=\"7920ba4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>\u00a0<\/p><pre class=\"prettyprint\"><span style=\"color: #00b2a9; font-family: Sailec, sans-serif; font-size: 2rem;\">Wrapping Up<\/span><\/pre><p>Creating and running a simple mapping solution from scratch with TomTom and ASP.NET Core is straightforward. We&#8217;ve seen how easy it is to install TomTom Client-Side Library packages using a Visual Studio. You just need to sign up for a free account in TomTom Developer Portal and obtain a TomTom developer key before running your solution.<\/p><p>Being a JavaScript library, TomTom Maps SDK for Web is easily pluggable into websites. As we&#8217;ve demonstrated, starting from a stripped-down map() function, developers can gradually improve their maps, for instance, by adding markers to given locations. Since dynamic and interactive solutions demand mapping information coming from the server, you can implement powerful ASP.NET Core controllers to both inject data into HTML and serve JSON data to client-side AJAX requests.<\/p><p>In the next article, we&#8217;ll dive into more sophisticated client-side mapping functions to draw rectangular areas around famous places that are easily recognizable in the map as we zoom in. We&#8217;ll also discuss how to refactor the solution and migrate the mapping data services to a new ASP.NET Core Web API project.<\/p><p><em>This article was originally posted on <a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1\">TomTom&#8217;s blog<\/a><\/em>.<\/p><p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>TomTom Maps SDK is a set of libraries that offer robust and comprehensive location services, including maps, search, routing, traffic, and geofencing. TomTom Maps SDKs are available for different platforms\u2014Android, iOS, and Web. But can we put TomTom Maps SDK for Web to work with a popular web framework, such as ASP.NET Core? The answer [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":5244,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[282,272,285,284],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using the TomTom Maps SDK for Web with ASP.NET Core, Part 1 &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using the TomTom Maps SDK for Web with ASP.NET Core, Part 1 &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"TomTom Maps SDK is a set of libraries that offer robust and comprehensive location services, including maps, search, routing, traffic, and geofencing. TomTom Maps SDKs are available for different platforms\u2014Android, iOS, and Web. But can we put TomTom Maps SDK for Web to work with a popular web framework, such as ASP.NET Core? The answer [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-06T14:55:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-17T16:40:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/using-the-tomtom-maps-sdk-for-web-with-asp-net-core-part-1\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"Using the TomTom Maps SDK for Web with ASP.NET Core, Part 1\",\"datePublished\":\"2021-01-06T14:55:04+00:00\",\"dateModified\":\"2021-11-17T16:40:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/using-the-tomtom-maps-sdk-for-web-with-asp-net-core-part-1\/\"},\"wordCount\":1489,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/5.png\",\"keywords\":[\"ASP.NET-Core\",\"JavaScript\",\"jQuery\",\"JSON\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/using-the-tomtom-maps-sdk-for-web-with-asp-net-core-part-1\/\",\"url\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1\",\"name\":\"Using the TomTom Maps SDK for Web with ASP.NET Core, Part 1 &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/5.png\",\"datePublished\":\"2021-01-06T14:55:04+00:00\",\"dateModified\":\"2021-11-17T16:40:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/5.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/5.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using the TomTom Maps SDK for Web with ASP.NET Core, Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using the TomTom Maps SDK for Web with ASP.NET Core, Part 1 &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1","og_locale":"en_US","og_type":"article","og_title":"Using the TomTom Maps SDK for Web with ASP.NET Core, Part 1 &#183; Technical Content Marketing | ContentLab","og_description":"TomTom Maps SDK is a set of libraries that offer robust and comprehensive location services, including maps, search, routing, traffic, and geofencing. TomTom Maps SDKs are available for different platforms\u2014Android, iOS, and Web. But can we put TomTom Maps SDK for Web to work with a popular web framework, such as ASP.NET Core? The answer [&hellip;]","og_url":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2021-01-06T14:55:04+00:00","article_modified_time":"2021-11-17T16:40:23+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/5.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#article","isPartOf":{"@id":"https:\/\/contentlab.com\/using-the-tomtom-maps-sdk-for-web-with-asp-net-core-part-1\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"Using the TomTom Maps SDK for Web with ASP.NET Core, Part 1","datePublished":"2021-01-06T14:55:04+00:00","dateModified":"2021-11-17T16:40:23+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/using-the-tomtom-maps-sdk-for-web-with-asp-net-core-part-1\/"},"wordCount":1489,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/5.png","keywords":["ASP.NET-Core","JavaScript","jQuery","JSON"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/using-the-tomtom-maps-sdk-for-web-with-asp-net-core-part-1\/","url":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1","name":"Using the TomTom Maps SDK for Web with ASP.NET Core, Part 1 &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#primaryimage"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/5.png","datePublished":"2021-01-06T14:55:04+00:00","dateModified":"2021-11-17T16:40:23+00:00","breadcrumb":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/5.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/5.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/using-tomtom-maps-sdk-web-aspnet-core-part-1#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"Using the TomTom Maps SDK for Web with ASP.NET Core, Part 1"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/5.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3400"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=3400"}],"version-history":[{"count":8,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3400\/revisions"}],"predecessor-version":[{"id":5424,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3400\/revisions\/5424"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/5244"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=3400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=3400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=3400"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=3400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}