{"id":4870,"date":"2018-03-23T10:26:01","date_gmt":"2018-03-23T17:26:01","guid":{"rendered":"http:\/\/www.couchbase.com\/blog\/?p=4870"},"modified":"2025-06-13T22:45:10","modified_gmt":"2025-06-14T05:45:10","slug":"geospatial-aspnet-aurelia-google-maps","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/","title":{"rendered":"Geospatial Search With ASP.NET Core, Aurelia, Google Maps"},"content":{"rendered":"
\n

Geospatial<\/a> search is now fully supported in Couchbase Server 5.5. Check out the Couchbase Server 5.5 announcement<\/a>, and download the developer build<\/a> for free right now.<\/p>\n<\/div>\n

\n

In this post, I\u2019m going to demonstrate the geospatial capabilities of Couchbase Full Text Search by creating a web-based UI that performs searches. Whenever I think of geospatial searches, I think about Yelp, which is great at helping me find restaurants in a specific area.<\/p>\n<\/div>\n

\n

So I\u2019m going to have a little fun and create a very bare-bones version of Yelp, but only for hotels. Also, read What is geospatial data?<\/a> if it is new to you.<\/p>\n<\/div>\n

\n

If you want to follow along, the full source code is available on Github<\/a>.<\/em><\/p>\n<\/div>\n

\n

Getting set up<\/h2>\n
\n
\n

Here are the steps I took to create a new project before I started writing code.<\/p>\n<\/div>\n

\n
    \n
  1. At the command line: dotnet new aurelia<\/code>. This assumes that you have .NET Core<\/a> installed. Note that Geospatial Search is not a .NET-only feature: you can use it with the other Couchbase SDKs<\/a> like Node.js, Java, etc.<\/strong> It also assumes that you\u2019ve installed a SPA template for Aurelia<\/a>. You can also go with Angular or React if you\u2019d like, but I really like Aurelia<\/a>, and I think you should give it a chance.<\/li>\n
  2. The above command will create a shell of an ASP.NET Core project. In this blog post, I\u2019m not going to use Razor. I\u2019m just using ASP.NET as a backend for REST API endpoints.<\/li>\n
  3. npm install aurelia-google-maps<\/code>. You don\u2019t have to use this, but the aurelia-google-maps plugin<\/a> will make it easy for me to interact with Google Maps in my app.<\/li>\n
  4. I opened this project in Visual Studio 2017. I added Couchbase.Extensions.DependencyInjection<\/a> with NuGet. You don\u2019t have to use this extension but it makes things easier.<\/li>\n
  5. I installed Couchbase Server 5.5, including the<\/strong> Full Text Search service<\/strong>. I setup the travel-sample bucket<\/a>. I created a user<\/a> “matt” with full access to that bucket.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n
    \n

    Create a Geospatial Index<\/h2>\n
    \n
    \n

    Before building the ASP.NET backend, we need to create a geospatial index in Couchbase Server. Once you log in, click “Search” on the menu (it\u2019s under “Workbench”). Click “Add Index” to get started.<\/p>\n<\/div>\n

    \n

    \"Create<\/span><\/p>\n<\/div>\n

    \n

    I named my index “mygeoindex”. I selected travel-sample as the bucket to index.<\/p>\n<\/div>\n

    \n

    In “Type Mappings”, I uncheck the default. I add a new type mapping with a type name of “hotel”. Every hotel document in “travel-sample” has a type with a value of “hotel”. Check the “only index specified fields” box.<\/p>\n<\/div>\n

    \n

    I\u2019m going to add two child fields. One is “geo”, which contains the geospatial coordinates inside a hotel document. Make sure to select “geopoint” as the type. The other is “name”, which will be the name of the hotel. I choose to “store” each of these: it will make the index larger, but I can avoid a secondary lookup if I store the information in the index.<\/p>\n<\/div>\n

    \n

    Important Note: There is a bug (NCBC-1651<\/a>) in the current release of the .NET SDK that will cause an error if you try to read from a geopoint field. In the code samples, I\u2019ve created a workaround: I don\u2019t actually get the geo & name fields from the search index. I instead use the document key returned by search to make a secondary “get” call and get the full document. Keep in mind this is still a technique you may want to consider if you want to keep the size of your index down. This bug has already been fixed and will be in a future release. Such is the peril of being on the cutting edge!<\/strong><\/p>\n<\/div>\n

    \n

    That\u2019s all there is to it. Click “Create Index”. Watch the “indexing progress” on the next screen until it gets to 100% (it should not take very long, assuming you remembered to uncheck “default”).<\/p>\n<\/div>\n<\/div>\n<\/div>\n

    \n

    ASP.NET Core REST Endpoints<\/h2>\n
    \n
    \n

    Next, let\u2019s move over to ASP.NET. I\u2019ll create two endpoints. One endpoint will demonstrate the bounding box<\/strong> search method, and the other will demonstrate the distance<\/strong> search method.<\/p>\n<\/div>\n

    \n

    I\u2019ll need a Couchbase bucket object to execute the queries. Follow the examples in my blog post about dependency injection<\/a> or check out the source code on Github if you\u2019ve never done this before.<\/em><\/p>\n<\/div>\n

    \n

    Bounding Box<\/h3>\n
    \n

    A “bounding box” search means that you define a box on a map, and you want to search for points of interest that are inside of that box. You only need two points to define a box: the top right corner coordinates and the bottom left corner coordinates. (Coordinates are latitude and longitude).<\/p>\n<\/div>\n

    \n
    \n
    public class BoxSearch\r\n{\r\n    public double LatitudeTopLeft { get; set; }\r\n    public double LongitudeTopLeft { get; set; }\r\n    public double LatitudeBottomRight { get; set; }\r\n    public double LongitudeBottomRight { get; set; }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n
    \n
    To create a bounding box geospatial query, use the GeoBoundingBoxQuery<\/code> class available in the .NET SDK. I\u2019ll do this inside of a POST method with the above BoxSearch<\/code> class as a parameter.<\/p>\n<\/div>\n
    \n
    \n
            [Route(\"api\/Box\")]\r\n        [HttpPost]\r\n        public IActionResult Box([FromBody] BoxSearch box)\r\n        {\r\n            var query = new GeoBoundingBoxQuery();\r\n            query.TopLeft(box.LongitudeTopLeft, box.LatitudeTopLeft);\r\n            query.BottomRight(box.LongitudeBottomRight, box.LatitudeBottomRight);\r\n            var searchParams = new SearchParams()\r\n                \/\/ .Fields(\"geo\", \"name\") \/\/ omitting because of bug NCBC-1651\r\n                .Limit(10)\r\n                .Timeout(TimeSpan.FromMilliseconds(10000));\r\n            var searchQuery = new SearchQuery\r\n            {\r\n                Query = query,\r\n                Index = \"mygeoindex\",\r\n                SearchParams = searchParams\r\n            };\r\n            var results = _bucket.Query(searchQuery);\r\n\r\n\/\/ ... snip ...<\/code><\/pre>\n<\/div>\n<\/div>\n
    \n
    All I need to return from this endpoint is a list of the results: each hotel\u2019s coordinates and the hotel\u2019s name & location. I created a GeoSearchResult<\/code> class for this.<\/p>\n<\/div>\n
    \n
    \n
    public class GeoSearchResult\r\n{\r\n    public double Latitude { get; set; }\r\n    public double Longitude { get; set; }\r\n    public InfoWindow InfoWindow { get; set; }\r\n}\r\n\r\npublic class InfoWindow\r\n{\r\n    public string Content { get; set; }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n
    \n
    I\u2019ve constructed this class to match the Google Maps plugin that I\u2019ll be using later.<\/em><\/p>\n<\/div>\n
    \n
    Finally, I\u2019ll use this class to return some results from the endpoint.<\/p>\n<\/div>\n
    \n
    \n
    \/\/ ... snip ...\r\n\r\n            var list = new List<GeoSearchResult>();\r\n            foreach (var hit in results.Hits)\r\n            {\r\n                \/\/ *** this part shouldn't be necessary\r\n                \/\/ the geo and name should come with the search results\r\n                \/\/ but there's an SDK bug NCBC-1651\r\n                var doc = _bucket.Get<dynamic>(hit.Id).Value;\r\n                \/\/ ****************\r\n                list.Add(new GeoSearchResult\r\n                {\r\n                    Latitude = doc.geo.lat,\r\n                    Longitude = doc.geo.lon,\r\n                    InfoWindow = new InfoWindow\r\n                    {\r\n                        Content = doc.name + \"<br \/>\" +\r\n                            doc.city + \", \" +\r\n                            doc.state + \" \" +\r\n                            doc.country\r\n                    }\r\n                });\r\n            }\r\n            return Ok(list);\r\n        }<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    Distance Search<\/h3>\n
    \n
    A “distance” search is another way to perform geospatial queries. This time, instead of a box, it will be more like a circle. You supply a single coordinate, and a distance. The distance will be the radius from that point.<\/p>\n<\/div>\n
    \n
    \n
    public class PointSearch\r\n{\r\n    public double Latitude { get; set; }\r\n    public double Longitude { get; set; }\r\n    public int Distance { get; set; }\r\n    \/\/ miles is being assumed as the unit\r\n    public string DistanceWithUnits => Distance + \"mi\";\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n
    \n
    I\u2019m defaulting it to miles, but certainly you can use kilometers instead, or present the option in the UI.<\/p>\n<\/div>\n
    \n
    The endpoint will be very similar to the bounding box endpoint, except that it uses GeoDistanceQuery<\/code>.<\/p>\n<\/div>\n
    \n
    \n
    [Route(\"api\/Point\")]\r\n[HttpPost]\r\npublic IActionResult Point([FromBody] PointSearch point)\r\n{\r\n    var query = new GeoDistanceQuery();\r\n    query.Latitude(point.Latitude);\r\n    query.Longitude(point.Longitude);\r\n    query.Distance(point.DistanceWithUnits);\r\n    var searchParams = new SearchParams()\r\n        \/\/ .Fields(\"geo\", \"name\") \/\/ omitting because of bug NCBC-1651\r\n        .Limit(10)\r\n        .Timeout(TimeSpan.FromMilliseconds(10000));\r\n    var searchQuery = new SearchQuery\r\n    {\r\n        Query = query,\r\n        Index = \"mygeoindex\",\r\n        SearchParams = searchParams\r\n    };\r\n    var results = _bucket.Query(searchQuery);\r\n\r\n    var list = new List<GeoSearchResult>();\r\n    foreach (var hit in results.Hits)\r\n    {\r\n        \/\/ *** this part shouldn't be necessary\r\n        \/\/ the geo and name should come with the search results\r\n        \/\/ but there's an SDK bug NCBC-1651\r\n        var doc = _bucket.Get<dynamic>(hit.Id).Value;\r\n        \/\/ ****************\r\n        list.Add(new GeoSearchResult\r\n        {\r\n            Latitude = doc.geo.lat,\r\n            Longitude = doc.geo.lon,\r\n            InfoWindow = new InfoWindow\r\n            {\r\n                Content = doc.name + \"<br \/>\" +\r\n                          doc.city + \", \" +\r\n                          doc.state + \" \" +\r\n                          doc.country\r\n            }\r\n        });\r\n    }\r\n    return Ok(list);\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n
    \n
    At this point, you can start testing these endpoint with Postman or Fiddler if you\u2019d like. But it will be so much nice to see this on a map.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    Auerlia and Google Maps<\/h2>\n
    \n
    \n
    In Aurelia, I\u2019ve created two components: geosearchbox and geosearchpoint.<\/p>\n<\/div>\n
    \n
    \"Auerlia<\/span><\/p>\n<\/div>\n
    \n
    Each of them will have a Google Maps component that the user can interact with. These maps will be centered on San Francisco, because that\u2019s where a lot of the hotels in “travel-sample” are located.<\/p>\n<\/div>\n
    \n
    Bounding Box search component<\/h3>\n
    \n
    The google-map`<\/code> component has a map-click.delegate that will will fire whenever the users clicks on the map. In geosearchbox.html:<\/p>\n<\/div>\n
    \n
    \n
    <google-map\r\n    if.bind=\"markers\"\r\n    map-click.delegate=\"clickMap($event)\"\r\n    latitude=\"37.780986253433895\"\r\n    longitude=\"-122.45291600632277\"\r\n    zoom=\"12\"\r\n    markers.bind=\"markers\">\r\n<\/google-map><\/code><\/pre>\n<\/div>\n<\/div>\n
    \n
    markers<\/code> is simply an array containing coordinates of search results that should appear on the map. Initially it will be empty.<\/p>\n<\/div>\n
    \n
    When the user first clicks the map, this will set the first coordinate (top left) in the form. In geosearchbox.ts:<\/p>\n<\/div>\n
    \n
    \n
    public clickMap(event : any) {\r\n    var latLng = event.detail.latLng,\r\n        lat = latLng.lat(),\r\n        lng = latLng.lng();\r\n\r\n    \/\/ only update top left if it hasn't been set yet\r\n    \/\/ or if bottom right is already set\r\n    if (!this.longitudeTopLeft || this.longitudeBottomRight) {\r\n        this.longitudeTopLeft = lng;\r\n        this.latitudeTopLeft = lat;\r\n        this.longitudeBottomRight = null;\r\n        this.latitudeBottomRight = null;\r\n    } else {\r\n        this.longitudeBottomRight = lng;\r\n        this.latitudeBottomRight = lat;\r\n    }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n
    \n
    Then, click another spot on the map. This will set the second coordinate (bottom right).<\/p>\n<\/div>\n
    \n
    My implementation is very bare bones. No fancy graphics and no validation of the second coordinate being to the bottom right of the first. The fields on a form will simply be populated with the latitude and longitude. In geosearchbox.html:<\/p>\n<\/div>\n
    \n
    \n
    <p>\r\n    Bounding box search:\r\n    <br \/>\r\n    Latitude (top left):\r\n        <input type=\"text\" value=\"${ latitudeTopLeft }\" \/>\r\n    Longitude (top left):\r\n        <input type=\"text\" value=\"${ longitudeTopLeft }\" \/>\r\n    <br \/>\r\n    Latitude (bottom right):\r\n        <input type=\"text\" value=\"${ latitudeBottomRight }\" \/>\r\n    Longitude (bottom right):\r\n        <input type=\"text\" value=\"${ longitudeBottomRight }\" \/>\r\n    <br \/>\r\n    <input\r\n        if.bind=\"latitudeTopLeft && latitudeBottomRight\"\r\n        click.trigger=\"searchClick()\"\r\n        type=\"button\"\r\n        name=\"search\"\r\n        value=\"Search\" \/>\r\n<\/p><\/code><\/pre>\n<\/div>\n<\/div>\n
    \n
    Once you\u2019ve selected two coordinates, a search button will appear. Click that to post these coordinates to the endpoint created earlier, and it will trigger the searchClick()<\/code> method as seen in geosearchbox.ts:<\/p>\n<\/div>\n
    \n
    \n
    public searchClick() {\r\n    let boxSearch = {\r\n        latitudeTopLeft: this.latitudeTopLeft,\r\n        longitudeTopLeft: this.longitudeTopLeft,\r\n        latitudeBottomRight: this.latitudeBottomRight,\r\n        longitudeBottomRight: this.longitudeBottomRight\r\n    };\r\n\r\n    console.log(\"POSTing to api\/Box: \" + JSON.stringify(boxSearch));\r\n\r\n    this.http.fetch('api\/Box', { method: \"POST\", body: json(boxSearch) })\r\n        .then(result => result.json() as Promise<any[]>)\r\n        .then(data => {\r\n            this.markers = data;\r\n        });\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n
    \n
    When Aurelia, Google Maps, ASP.NET Core, and Couchbase all work together, it looks like this:<\/p>\n<\/div>\n
    \n
    \"Geospatial<\/span><\/p>\n<\/div>\n<\/div>\n
    \n
    Distance Search<\/h3>\n
    \n
    Implementing the “distance” geostatial query will be similar to the bounding box UI. This time, you only need to click a single point on the map. But, you will need to type in a distance (in miles).<\/p>\n<\/div>\n
    \n
    The google-map<\/code> component will look identical. The clickMap<\/code> function is different:<\/p>\n<\/div>\n
    \n
    \n
    public clickMap(event: any) {\r\n    var latLng = event.detail.latLng,\r\n        lat = latLng.lat(),\r\n        lng = latLng.lng();\r\n\r\n    this.longitude = lng;\r\n    this.latitude = lat;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n
    \n
    Specify a distance (in miles), and then click ‘search’ to make a POST request to the endpoint we wrote earlier.<\/p>\n<\/div>\n
    \n
    \n
    geosearchbox.html:\r\n\r\n    <p>\r\n        Distance search:\r\n        <br \/>\r\n        Latitude: <input type=\"text\" value=\"${ latitude }\" \/>\r\n        Longitude: <input type=\"text\" value=\"${ longitude }\" \/>\r\n        <br \/>\r\n        Distance (miles): <input type=\"text\" value=\"${ distance }\" \/>\r\n        <br \/>\r\n        <input if.bind=\"latitude\" click.trigger=\"searchClick()\" type=\"button\" name=\"search\" value=\"Search\" \/>\r\n    <\/p>\r\n\r\ngeosearchbox.ts:\r\n\r\n    public searchClick() {\r\n        let pointSearch = {\r\n            latitude: this.latitude,\r\n            longitude: this.longitude,\r\n            distance: this.distance\r\n        };\r\n\r\n        console.log(\"POSTing to api\/Point: \" + JSON.stringify(pointSearch));\r\n\r\n        this.http.fetch('api\/Point', { method: \"POST\", body: json(pointSearch) })\r\n            .then(result => result.json() as Promise<any[]>)\r\n            .then(data => {\r\n                this.markers = data;\r\n            });\r\n    }\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n
    \n
    Below is a clip of the search in motion. Note how the results change as I move the coordinate around.<\/p>\n<\/div>\n
    \n
    \"Geospatial<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    Summary<\/h2>\n
    \n
    \n
    With Couchbase\u2019s built-in geospatial indexing<\/a> and search feature, all the math and the searching is delegated to the Couchbase Data Platform. So you can focus on building a killer UI (better than mine anyway) and rock-solid business logic.<\/p>\n<\/div>\n
    \n
    Be sure to check out the documentation<\/a> for a complete overview of the geospatial capabilities of Couchbase. Read this blog post to learn more about spatial databases<\/a>.<\/p>\n<\/div>\n
    \n
    If you need help or have questions, please check out the Couchbase Server forums<\/a>, and if you have any questions about the Couchbase .NET SDK, check out the .NET SDK forums<\/a>.<\/p>\n<\/div>\n
    \n
    If you\u2019d like to get in touch with me, please leave a comment or find me on Twitter @mgroves<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    Geospatial search is now fully supported in Couchbase Server 5.5. Check out the Couchbase Server 5.5 announcement, and download the developer build for free right now. In this post, I\u2019m going to demonstrate the geospatial capabilities of Couchbase Full Text […]<\/p>\n","protected":false},"author":71,"featured_media":10791,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1811,10126,10127,1816,2165,8683,9327],"tags":[2182,1803,1543,1718],"ppma_author":[8937],"class_list":["post-4870","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnet","category-asp-dotnet","category-c-sharp","category-couchbase-server","category-full-text-search","category-geospatial","category-javascript","tag-devbuild","tag-google-maps","tag-javascript","tag-typescript"],"yoast_head":"\nGeospatial Search With ASP.NET Core, Aurelia, Google Maps<\/title>\n<meta name=\"description\" content=\"Geospatial search is fully supported in Couchbase Server 5.5. This post demonstrates geospatial search capabilities with a web-based UI.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Geospatial Search With ASP.NET Core, Aurelia, Google Maps\" \/>\n<meta property=\"og:description\" content=\"Geospatial search is fully supported in Couchbase Server 5.5. This post demonstrates geospatial search capabilities with a web-based UI.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-23T17:26:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-14T05:45:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/03\/104-hero-map-geospatial_RESIZED.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1300\" \/>\n\t<meta property=\"og:image:height\" content=\"642\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Matthew Groves\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mgroves\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matthew Groves\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/\"},\"author\":{\"name\":\"Matthew Groves\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/3929663e372020321b0152dc4fa65a58\"},\"headline\":\"Geospatial Search With ASP.NET Core, Aurelia, Google Maps\",\"datePublished\":\"2018-03-23T17:26:01+00:00\",\"dateModified\":\"2025-06-14T05:45:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/\"},\"wordCount\":1397,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/1\\\/2018\\\/03\\\/104-hero-map-geospatial_RESIZED.jpg\",\"keywords\":[\"devbuild\",\"Google Maps\",\"javascript\",\"TypeScript\"],\"articleSection\":[\".NET\",\"ASP.NET\",\"C#\",\"Couchbase Server\",\"Full-Text Search\",\"Geospatial\",\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/\",\"name\":\"Geospatial Search With ASP.NET Core, Aurelia, Google Maps\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/1\\\/2018\\\/03\\\/104-hero-map-geospatial_RESIZED.jpg\",\"datePublished\":\"2018-03-23T17:26:01+00:00\",\"dateModified\":\"2025-06-14T05:45:10+00:00\",\"description\":\"Geospatial search is fully supported in Couchbase Server 5.5. This post demonstrates geospatial search capabilities with a web-based UI.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/1\\\/2018\\\/03\\\/104-hero-map-geospatial_RESIZED.jpg\",\"contentUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/1\\\/2018\\\/03\\\/104-hero-map-geospatial_RESIZED.jpg\",\"width\":1300,\"height\":642,\"caption\":\"A compass laid atop a map with a red X marking a proposed destination\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/geospatial-aspnet-aurelia-google-maps\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Geospatial Search With ASP.NET Core, Aurelia, Google Maps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/admin-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/admin-logo.png\",\"width\":218,\"height\":34,\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/3929663e372020321b0152dc4fa65a58\",\"name\":\"Matthew Groves\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/70feb1b28a099ad0112b8d21fe1e81e1a4524beed3e20b7f107d5370e85a07ab?s=96&d=mm&r=gba51e6aacc53995c323a634e4502ef54\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/70feb1b28a099ad0112b8d21fe1e81e1a4524beed3e20b7f107d5370e85a07ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/70feb1b28a099ad0112b8d21fe1e81e1a4524beed3e20b7f107d5370e85a07ab?s=96&d=mm&r=g\",\"caption\":\"Matthew Groves\"},\"description\":\"Matthew D. Groves is a guy who loves to code. It doesn't matter if it's C#, jQuery, or PHP: he'll submit pull requests for anything. He has been coding professionally ever since he wrote a QuickBASIC point-of-sale app for his parent's pizza shop back in the 90s. He currently works as a Senior Product Marketing Manager for Couchbase. His free time is spent with his family, watching the Reds, and getting involved in the developer community. He is the author of AOP in .NET, Pro Microservices in .NET, a Pluralsight author, and a Microsoft MVP.\",\"sameAs\":[\"https:\\\/\\\/crosscuttingconcerns.com\",\"https:\\\/\\\/x.com\\\/mgroves\"],\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/author\\\/matthew-groves\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Geospatial Search With ASP.NET Core, Aurelia, Google Maps","description":"Geospatial search is fully supported in Couchbase Server 5.5. This post demonstrates geospatial search capabilities with a web-based UI.","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:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/","og_locale":"en_US","og_type":"article","og_title":"Geospatial Search With ASP.NET Core, Aurelia, Google Maps","og_description":"Geospatial search is fully supported in Couchbase Server 5.5. This post demonstrates geospatial search capabilities with a web-based UI.","og_url":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/","og_site_name":"The Couchbase Blog","article_published_time":"2018-03-23T17:26:01+00:00","article_modified_time":"2025-06-14T05:45:10+00:00","og_image":[{"width":1300,"height":642,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/03\/104-hero-map-geospatial_RESIZED.jpg","type":"image\/jpeg"}],"author":"Matthew Groves","twitter_card":"summary_large_image","twitter_creator":"@mgroves","twitter_misc":{"Written by":"Matthew Groves","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/"},"author":{"name":"Matthew Groves","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/3929663e372020321b0152dc4fa65a58"},"headline":"Geospatial Search With ASP.NET Core, Aurelia, Google Maps","datePublished":"2018-03-23T17:26:01+00:00","dateModified":"2025-06-14T05:45:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/"},"wordCount":1397,"commentCount":0,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/03\/104-hero-map-geospatial_RESIZED.jpg","keywords":["devbuild","Google Maps","javascript","TypeScript"],"articleSection":[".NET","ASP.NET","C#","Couchbase Server","Full-Text Search","Geospatial","JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/","url":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/","name":"Geospatial Search With ASP.NET Core, Aurelia, Google Maps","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/03\/104-hero-map-geospatial_RESIZED.jpg","datePublished":"2018-03-23T17:26:01+00:00","dateModified":"2025-06-14T05:45:10+00:00","description":"Geospatial search is fully supported in Couchbase Server 5.5. This post demonstrates geospatial search capabilities with a web-based UI.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/03\/104-hero-map-geospatial_RESIZED.jpg","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2018\/03\/104-hero-map-geospatial_RESIZED.jpg","width":1300,"height":642,"caption":"A compass laid atop a map with a red X marking a proposed destination"},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/geospatial-aspnet-aurelia-google-maps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Geospatial Search With ASP.NET Core, Aurelia, Google Maps"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"The Couchbase Blog","description":"Couchbase, the NoSQL Database","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"The Couchbase Blog","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","width":218,"height":34,"caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/3929663e372020321b0152dc4fa65a58","name":"Matthew Groves","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/70feb1b28a099ad0112b8d21fe1e81e1a4524beed3e20b7f107d5370e85a07ab?s=96&d=mm&r=gba51e6aacc53995c323a634e4502ef54","url":"https:\/\/secure.gravatar.com\/avatar\/70feb1b28a099ad0112b8d21fe1e81e1a4524beed3e20b7f107d5370e85a07ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70feb1b28a099ad0112b8d21fe1e81e1a4524beed3e20b7f107d5370e85a07ab?s=96&d=mm&r=g","caption":"Matthew Groves"},"description":"Matthew D. Groves is a guy who loves to code. It doesn't matter if it's C#, jQuery, or PHP: he'll submit pull requests for anything. He has been coding professionally ever since he wrote a QuickBASIC point-of-sale app for his parent's pizza shop back in the 90s. He currently works as a Senior Product Marketing Manager for Couchbase. His free time is spent with his family, watching the Reds, and getting involved in the developer community. He is the author of AOP in .NET, Pro Microservices in .NET, a Pluralsight author, and a Microsoft MVP.","sameAs":["https:\/\/crosscuttingconcerns.com","https:\/\/x.com\/mgroves"],"url":"https:\/\/www.couchbase.com\/blog\/author\/matthew-groves\/"}]}},"acf":[],"authors":[{"term_id":8937,"user_id":71,"is_guest":0,"slug":"matthew-groves","display_name":"Matthew Groves","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/70feb1b28a099ad0112b8d21fe1e81e1a4524beed3e20b7f107d5370e85a07ab?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts\/4870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/users\/71"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/comments?post=4870"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts\/4870\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/media\/10791"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/media?parent=4870"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/categories?post=4870"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/tags?post=4870"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=4870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}