Midstream Energy Partners

Energy Website GIS
Case Study · Energy / Interactive GIS Map

Midstream Energy Partners

Appspring built an interactive GIS map of North American pipeline assets covering propane, butane, and natural gas. The work overcame native MapGeo Plus restrictions on watermarks, border styles, and mobile behavior through custom JavaScript and CSS extensions based on Figma designs.

2024 – 2025 Energy / Interactive GIS Map Dedicated Project Team Via Upwork
Business Challenge

Problem and context

This section describes the situation before the engagement, so prospective clients can determine whether it corresponds to their current position.

Consider this project if: your team recognizes one or more of the conditions described alongside this panel.

Pipeline assets require geographic presentation by product category.

Native plugin constraints limit branding and mobile presentation.

Advisor contact information must be accessible from each asset.

Traffic and interaction need structured, responsive layouts.

Solution

Delivery scope

Each item below states what was delivered and the operational reason for that decision.

Step 0101

Custom MapGeo Plus extension layer

Engineered JavaScript and CSS extensions over the MapGeo API for markers, hover tooltips with advisor details, and tabbed category navigation.

Why this approach: Benefit: the map meets brand and functional requirements the plugin alone does not provide.
Step 0202

Pixel-precise responsive implementation

Replicated Figma prototypes across viewports with color-coded markers.

Why this approach: Benefit: asset consultation remains clear on desktop and mobile.

Technologies and stack

WordPress MapGeo Plus API JavaScript (ES6+ Marker & Tooltip Logic) CSS3 / SASS Figma Prototypes HTML5 Responsive

Engagement summary

Period
2024 – 2025
Model
Dedicated project team
Channel
Upwork
Category
Energy / Interactive GIS Map
Outcome

Result

The company presents pipeline assets through a branded, navigable GIS interface. Delivered via Upwork in 2024–2025.

Discuss a similar requirement

If your organization faces a comparable situation, the team can review scope, constraints, and delivery options.

“Oscar is professional, efficient and on top of it!”

Ready to start your next project?

Let our team build a custom solution for you.